0

我创建了一个几乎完成的网站，并在 Firefox、chrome、safari、opera 和 IE 9 中对其进行了测试，它们都可以工作并且看起来都一样。

我使用 Adob​​e 的浏览器实验室在 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 中的呈现方式：

IE7

和 IE8：

IE8

另外，我正在使用 HTML5 shiv

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

任何人都可以对我的情况有所了解吗？

多谢你们。

4

4 回答 4

1

我不确定 IE7/8 是否处理 nav 标签。尝试添加 shiv 以查看是否可以解决它。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

如果没有，您可能需要将 nav 更改为然后将 nav 的 css 更新为 .nav

于 2012-08-07T10:38:56.823 回答
1

如果上述方法不起作用，请不要使用 nav 标签，只需添加 # 使其成为 div 即可。然后把html放到div中，

<div id="nav">

等等

于 2012-08-07T11:02:07.190 回答
1

以上两个答案是对的我想再添加一件事

nav li {
display: inline-block;}

ie7不支持该inline-block属性所以试试

nav li {display:block; float:left}或者一些回退到ie7

于 2012-08-07T11:06:23.357 回答
0

如果我是你，我会使用一个div作为导航的容器

于 2012-08-07T11:09:38.510 回答