ほぼ完成した Web サイトを作成し、Firefox、Chrome、Safari、Opera、IE 9 でテストしましたが、それらはすべて機能し、同じように見えます。
Adobe の Browser Lab を使用して IE8 と IE7 でサイトをテストしましたが、CSS3 の一部が壊れており、これはサポートされていないため発生するはずでしたが、ナビゲーションが壊れているようで、使用している知識に関しては理由がわかりませんそのための CSS2 宣言。
ここで私のナビゲーションが機能していることを確認するには、コードへのリンクがあります。
またはここにコードがあります：
<div id="container">
<!--Start Navigation Section -->
<header>
<a href="index.html"><img src="http://www.jrk-design.co.uk/gl/images/logo.png" width=245 height=64 alt="Goldie Locks Logo" /></a>
<nav>
<ul id="main_nav">
<li><a href="index.html" id="index">home<p> a warm welcome</p></a></li>
<li><a href="hair.html" id="hair">hair<p>hair extensions</p></a></li>
<li><a href="beauty.html" id="beauty">beauty<p>beauty treatments</p></a></li>
<li><a href="contact.php" id="contact">contact<p>drop me a line</p></a></li>
</ul>
</nav>
</header>
</div>
そして私のCSS：
header {
width: 910px;
height: 85px;
}
header img {
margin: 24px 0px 0px 0px;
}
nav {
height: 85px;
float: right;
text-align: center;
}
nav ul#main_nav {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
width: 132px;
height: 85px;
text-decoration: none;
text-transform: uppercase;
}
nav li a {
display: block;
width: 132px;
height: 30px;
color: #b06e28;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding: 55px 0px 0px;
}
nav li a p {
font-style: italic;
font-size: 14px;
color: #858585;
text-transform: lowercase;
padding: 0;
margin: 0;
}
a#index {
background-image: url(http://www.jrk-design.co.uk/gl/images/index_nav.png);
}
a#hair {
background-image: url(http://www.jrk-design.co.uk/gl/images/hair_nav.png);
}
a#beauty {
background-image: url(http://www.jrk-design.co.uk/gl/images/beauty_nav.png);
}
a#contact {
background-image: url(http://www.jrk-design.co.uk/gl/images/contact_nav.png);
}
ul#main_nav li a:hover {
color: #4c4c4e;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
background-position: 0;
}
body.index ul#main_nav li a#index {
background-position: 0;
}
body.hair ul#main_nav li a#hair {
background-position: 0;
}
body.beauty ul#main_nav li a#beauty {
background-position: 0;
}
body.contact ul#main_nav li a#contact {
background-position: 0;
}
私のナビは次のようになります。
IE7 でのレンダリング方法は次のとおりです。
そしてIE8：
また、HTML5 shiv を使用しています
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
誰でも私の状況に光を当てることができますか?
みんなありがとう。