Firefox rendu HTML parfois incorrect

Question

J'ai développé un menu css et il a bien fonctionné dans tous les navigateurs de mes tests (pur html/css). Quand nous avons introduit le code dans notre environnement de développement qui fonctionne sur cakePHP, nous avons commencé à voir le bug du menu parfois dans Firefox (3.5.2). Cela n'arrive dans aucun autre navigateur. J'ai vérifié la source quand le bogue se produit et c'est ce qu'il ressemble à (l'autre bloc li ci-dessous est la façon dont il est censé regarder):

<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> 

Voici le CSS pertinent:

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; } 

Je sais qu'il pourrait y avoir un certain nombre de problèmes, mais j'essaie de le réduire.

Answer 1

Vous n'êtes pas autorisé à avoir un div à l'intérieur d'un lien. Firefox corrige automatiquement cela comme il le pensait. Bien sûr, une machine ne peut pas vraiment deviner ce que vous avez essayé, donc elle 'bugs out'

En fait, apparemment FireFox est le seul navigateur qui voit même que vous avez fait une erreur. Les autres navigateurs ignorent simplement votre code HTML incorrect.

Essayez de supprimer la div, et donnez simplement < une propriété display: block dans la feuille de style.

Answer 2

Eh bien, ce qui me saute aux yeux est que dans le premier <li>, votre extérieur <a href="/businesses/dashboard"/> est Enfermer rien et fermé à l'aide />, ce qui ne semble pas comme il est susceptible d'être ce que vous voulez. Il est possible que Firefox 3.5.2 soit plus sensible que d'autres navigateurs pour une raison quelconque, mais il semble que le problème réside dans ce qui génère ce code HTML.

Answer 3

Comme mentionné dans les commentaires, votre balisage n'est pas strictement valide (vide a ou div à l'intérieur de a). Pour moi, cela signifie que, même si cela peut être rendu comme vous le souhaitez dans la plupart des navigateurs, il est inutile de dire que cela se traduit «correctement» ici et non là.

Mon conseil est de corriger votre balisage afin qu'il valide d'abord. Une fois que vous avez un balisage valide, vous pouvez vous attendre à de bons navigateurs comme Firefox récents pour le rendre "correctement", puis dépanner les problèmes spécifiques au navigateur qui restent.

validateur w3c: http://validator.w3.org/

Answer 4

Rappelez-vous, ce code est correct en HTML5.

http://html5doctor.com/block-level-links-in-html-5/