html - IE 7和8中的导航UL

我创建了一个网站，该网站几乎已完成并在Firefox，Chrome，Safari，Opera和IE 9中进行了测试，它们都可以正常工作并且外观相同。

我使用Adobe的Browser Lab在IE8和IE7上测试了该站点，并且某些CSS3损坏了，因为它不被支持，所以必然会发生。它的CSS2声明。

要查看我的导航在这里的工作原理，请参见代码链接：

http://jsfiddle.net/6SkkP/

或下面的代码：

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

有人能照亮我的处境吗？

谢谢你们。

最佳答案

如果以上方法均无效，则不要使用nav标签，而只需添加＃使其成为div。然后将html放入div，

<div id="nav">

等等