Firefox有时候渲染HTML不正确 [英] Firefox rendering HTML incorrect sometimes

问题描述

我开发了一个css菜单，并且在我测试的所有浏览器（纯html / css）中工作良好。当我们将代码带入我们在cakePHP上运行的开发环境中时，我们开始在Firefox（3.5.2）中看到菜单错误。这发生在没有其他浏览器。我检查了错误发生时的源代码，这就是它的样子（它下面的其他li块是它应该看起来的样子）：

 < div class =nav1> 
< ul id =dropnav> 
< li id =dashboard> 
< a href =/ business / dashboard/> 
< div> 
< span class =white caps> 
< a href =/ business / dashboard> Dashboard< / a> 
< / span> 
< a href =/ business / dashboard> 
< br /> 
< small>快速浏览您的所有资料< / small> 
< / a> 
< / div> 
< / li> 
 
< a href =/ business / edit_profile> 
< div> 
< span class =white caps>清单< / span> 
< br /> 
< small>查看和编辑您的列表< / small> 
< / div> 
< / a> 
< / li> 
< / ul>< / div> 
  

以下是相关的CSS：

  
 span.caps {text-transform：uppercase; } 
 .white {color：#fff;} 
 .nav1 {background：url（'../ images / gradients / nav1.gif'）repeat-x;高度：50像素; } 
 .nav1 #dropnav {list-style-type：none;余量：0;高度：50像素;浮动：左;行高：1; } 
 .nav1 #dropnav li {padding：8px 10px 7px 10px; border-left：1px solid＃3ba2da; border-right：1px solid＃1f74a3; float：left; position：relative; } 
 .nav1 #dropnav li div {position：relative;向左飘浮;填充顶：5像素; } 
 .nav1 #dropnav li a {padding：0 0 6px 40px;向左飘浮; text-decoration：none;} 
 .nav1 #dropnav li：hover，.nav1 #dropnav li.active {background：＃3b3b3b; } 
 .nav1 #dropnav li＃first：hover，.nav1 ul li＃last：hover {background：none;} 
 .nav1 #dropnav li：hover small，.nav1 #dropnav li.active small {color：#fff; } 
 .nav1 small {line-height：1.2em;颜色：＃111; } 
 .nav1 span {font-weight：bold; } 
 .nav1 #dashboard a {background：url（'../ images / icons / nav134.png'）no-repeat 0 -102px; } 
 .nav1 #listing a {background：url（'../ images / icons / nav134.png'）no-repeat 0 -68px; } 
 .nav1 #messages a {background：url（'../ images / icons / nav134.png'）no-repeat 0 -34px; } 
 .nav1 #tools a {background：url（'../ images / icons / nav134.png'）no-repeat 0 0; } 
  

我知道可能存在一些问题，但我正在努力缩小范围。 / p>

解决方案

您不允许在链接中使用div。 Firefox会自动按照您认为的方式修正此问题。当然，一台机器不能真正猜到你尝试的是什么，所以它'错误'。

事实上，显然FireFox是唯一的浏览器，甚至看到你犯了一个错误。其他浏览器只是忽略你不正确的HTML。

尝试删除div，只给< a>样式表中的display：block属性。

I developed a css menu and it has worked fine across all browsers in my testing (pure html/css). When we brought the code into our development environment which is running on cakePHP, we started seeing the menu bug out sometimes in Firefox (3.5.2). It happens in no other browser. I checked the source when the bug occurs and this is what it looks like (the other li block below it is how it is supposed to look):

<div class="nav1">
<ul id="dropnav">
    <li id="dashboard">
        <a href="/businesses/dashboard"/>
        <div>
            <span class="white caps">
                <a href="/businesses/dashboard">Dashboard</a>
            </span>
            <a href="/businesses/dashboard">
                <br/>
                <small>At-a-glance view of all your stuff</small>
            </a>
        </div>
    </li>
    <li id="listing" class="active">
        <a href="/businesses/edit_profile">
        <div>
            <span class="white caps">Listing</span>
            <br/>
            <small>View and edit your listing</small>
        </div>
        </a>
    </li>
</ul></div>

Here's the relevant CSS:

span.caps { text-transform:uppercase; }
.white{color:#fff;}
.nav1 { background: url('../images/gradients/nav1.gif') repeat-x; height:50px; }
.nav1 #dropnav { list-style-type:none; margin:0; height:50px;float:left;line-height:1; }
.nav1 #dropnav li { padding:8px 10px 7px 10px; border-left: 1px solid #3ba2da; border-right: 1px solid #1f74a3;float:left;position:relative; }
.nav1 #dropnav li div { position:relative; float:left; padding-top:5px; }
.nav1 #dropnav li a { padding:0 0 6px 40px; float:left; text-decoration:none;}
.nav1 #dropnav li:hover, .nav1 #dropnav li.active { background: #3b3b3b; }
.nav1 #dropnav li#first:hover, .nav1 ul li#last:hover {background:none;}
.nav1 #dropnav li:hover small, .nav1 #dropnav li.active small{ color:#fff; }
.nav1 small { line-height:1.2em; color:#111; }
.nav1 span { font-weight:bold; }
.nav1 #dashboard a{ background: url('../images/icons/nav134.png') no-repeat 0 -102px; }
.nav1 #listing a{ background: url('../images/icons/nav134.png') no-repeat 0 -68px; }
.nav1 #messages a{ background: url('../images/icons/nav134.png') no-repeat 0 -34px; }
.nav1 #tools a{ background: url('../images/icons/nav134.png') no-repeat 0 0; }

I know there could be a number of problems but I'm trying to narrow it down.

解决方案

You are not allowed to have a div inside a link. Firefox automatically corrects this the way it thinks you meant it to be. Of course a machine can't really guess what it is you tried, so it 'bugs out'

In fact, apparently FireFox is the only browser that even sees that you made a mistake. The other browsers just ignore your improper HTML.

Try removing the div, and just give the <a> a display:block property in the stylesheet.

这篇关于Firefox有时候渲染HTML不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！