Ich entwickelte ein CSS-Menü und es hat über alle Browser in meinem Test (pure HTML/CSS) funktioniert. Als wir den Code in unsere Entwicklungsumgebung brachten, die auf cakePHP läuft, haben wir manchmal in Firefox (3.5.2) gesehen, dass der Menü-Bug herauskam. Es passiert in keinem anderen Browser. Ich habe die Quelle, wenn der Fehler auftritt, und das ist, was es sieht aus wie (der andere li Block darunter ist, wie es aussehen soll):Firefox Rendering HTML inkorrekt manchmal
<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>
Hier ist der relevante 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; }
Ich weiß, dass es eine Reihe von Problemen geben könnte, aber ich versuche es einzugrenzen.
Es würde helfen, wenn Sie würde beschreiben, was seine „nervt out“ besteht aus genau. – chaos
Ich denke nicht * Sie dürfen Block-Level-Elemente (div) innerhalb von Links (a) haben, gemäß w3-Standards. – mpen
Ja, W3C-Validator erstickt daran. – chaos