ネストされたブロックレベルの要素を持つDivがIE7でスタイリングを失う

Question

私は960gを使用してサイトを構築しています。

<nav class="push_1"> 
         <div class="grid_2 alpha"><span>About</span><a href="#" title="About"></a></div> 
        <div class="grid_2"><span>Services</span><a href="#" title="Services"></a></div> 
        <div class="grid_2"><span>Projects</span><a href="#" title="Projects"></a></div> 
        <div class="grid_2"><span>Client Stories</span><a href="#" title="Client Stories"></a></div> 
        <div class="grid_2"><span>Contact</span><a href="#" title="Contact"></a></div> 
      </nav> 

そして、このCSS：私のナビゲーションメニューは、このコード使用

.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;} 
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden} 
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block } 
.interior nav div{height:50px} 
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9} 
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5} 

Firefoxで正常に動作しますが、IE7で無残に失敗し、<span>要素内のどこのテキストのみが表示され、他のすべてのスタイリング失われます。 divsの代わりに<li>個の項目を使用しようとすると、同じ問題が発生しました。奇妙なことに、nav divの高さが50pxに設定されている場合、同じコードはIE7で問題なく表示されます。ページにはclass="interiorが設定されています。このページではHTML5シムが有効です。私はさまざまな既知のIE7バグを検索しようとしましたが、私が抱えている問題と非常によく似たものを見つけることができませんでした。誰かが何か示唆を持っているなら、私はずっと義務づけられています。

Answer 1

IE8では、問題を再現できました。私が見つけたのは、それを混乱させるタグがあったということでした。私がそれらをdivに変更し、それらのdivのクラスとして "nav"を追加し、CSSで "nav"を ".nav"に変更した場合、IEは幸せそうです。あなたはこのjsFiddleでここにアクションでそれを見ることができます。

http://jsfiddle.net/jfriend00/Vz85f/

あなたはまだ他の理由のためにタグをしたい場合、あなたが前とその後とフィドルにHTMLをラップすることができますように見える、それはまだでしょうIEで適切に表示する - CSSルールでnavを使用しないでください。なぜ私は確かではない - ちょうど私が実験で見つけたものを報告する。