すべての主要なブラウザーとワイドスクリーン、および通常のブラウザーで一貫して表示する必要があるため、固定流動混合幅レイアウトに基づいて Web ページを作成しました。Fire-Fox と chrome では問題なく動作しましたが、IE では完全に機能しなくなりました。
ホバーすると垂直要素を持つ水平リスト項目のメニューがあります。信じられないかもしれませんが、IE は垂直要素自体を表示しません。
その違いにただただ圧倒されます。コードは次のとおりです。
http://jsfiddle.net/thedarkjedi/wknmn/
メニュー専用の CSS のほぼ半分が機能しなくなった理由を教えてください。他のブラウザでは問題なく動作します。
それはIEで故障するだけです。どこを間違えているのか理解できません。
PS: また、ほぼすべてのトリックを試した後でも、フッター自体と下部にギャップがある理由を誰か教えてください (ページの下部にくっつく必要がありますが、それ以上の場合はコンテンツに場所を空ける必要があります)。ネットで発見。
フッターに関連する私のコードは次のとおりです。
<div id="FooterContainer">
<div id="Footer" >
<div id="Footer_Content">
<ul id="Footer_Nav">
<li id="Contact"><a href="#">Contact US</a></li>
<li id="About"><a href="#">About</a></li>
<li id="ToC"><a href="#">Terms & Conditions</a></li>
</ul>
</div>
<div class="notice">
Designed & Developed by Sudhanshu Nautiyal
</div>
</div>
</div>
</div>
CSSは次のとおりです。
/* フッター開始 */
#FooterContainer {
//clear:both;
background: #b8e1fe;
}
#Footer {
width: 960px;
height: 100px;
margin: 0px auto;
}
#Footer_Content {
text-align:center;
}
/* Footer Navigation begins*/
#Footer_Nav {
display: inline-block;
//width: 100%;
padding: 0;
list-style: none;
}
#Footer_Nav li {
float:left;
}
#Footer_Nav li a {
//display: block;
padding: 5px 10px;
font-family: Arial;
font-size: 15px;
color: #0b6998;
}
/*Footer NAvigation Ends */