Firefoxのレンダリング時にはHTMLが正しくない

Question

私はCSSメニューを開発しました。テスト（純粋なhtml/css）ではすべてのブラウザでうまく機能しています。 cakePHP上で実行されている開発環境にコードを持ってきたときに、Firefox（3.5.2）でメニューのバグが表示されることがありました。それは他のブラウザでは起こりません。 （その下に他のliブロックは、見えるようになっている方法です）バグが発生したとき、私はソースをチェックし、これは次のようになります。

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

ここでは、関連する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; } 

私はいくつかの問題があるかもしれないことを知っていますが、私はそれを絞ろうとしています。

Answer 1

リンク内にdivを持つことはできません。 Firefoxは、あなたがそれを意味すると自動的にこれを修正します。もちろん、マシンはあなたが試したものを実際に推測することはできないので、バグが出ています。

実際には、明らかにFireFoxが間違いを犯したと見える唯一のブラウザです。他のブラウザはあなたの不適切なHTMLを無視します。

divを削除して、の>にスタイルシートのdisplay：ブロックプロパティを付けてみてください。

Answer 2

さて、何を私に出て飛躍することはまず<li>で、あなたの外側<a href="/businesses/dashboard"/>は何を囲んでいないし、それはあなたが望むものになりそうだように見えるしていません/>を、使用して閉じていることです。おそらくFirefox 3.5.2は何らかの理由で他のブラウザよりも敏感ですが、問題はHTMLを生成しているものであるようです。

Answer 3

コメントに記載されているとおり、マークアップは厳密には有効ではありません（aの中の空のaまたはdiv）。私にとって、これは、ほとんどのブラウザであなたが望むようにレンダリングするかもしれませんが、ここで正しくレンダリングされていると言っても意味がありません。

私のアドバイスは、最初に検証するようにマークアップを修正することです。有効なマークアップがあれば、最近のFirefoxのような素晴らしいブラウザが正しく表示され、残っているブラウザ固有の問題のトラブルシューティングを行うことができます。

W3Cのバリデータ：http://validator.w3.org/

Answer 4

が、これはHTML5で正しいコードであることに注意してください。それはあなたがその「アウト盗聴」かを説明したい場合に役立つだろう

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