只是想知道是否有人可以帮我弄清楚为什么我的菜单在IE中这样做但没有其他浏览器......
这是我在我的css表中的代码..我没有达到css / html的速度所以我不知道这里有什么...任何帮助将不胜感激。
/*===== header =====*/
header nav {
float:right;
}
header nav ul li {
float:left;
}
header nav ul li a {
font-size:22px;
color:#fff;
height:67px;
line-height:67px;
text-decoration:none;
width:101px;
text-align:center;
float:left;
background:#433b8f;
background-image: gradient(top, #383282, #484095); /* FF3.6 */
background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */
}
header nav ul li a.current, header nav ul li a:hover {
padding-bottom:5px;
}
header nav ul li:nth-of-type(2) a {
background:#0184cd;
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
}
header nav ul li:nth-of-type(3) a {
background:#7cbc19;
background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
}
header nav ul li:nth-of-type(4) a {
background:#ffbc00;
background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */
}
header nav ul li:nth-of-type(5) a {
background:#f07502;
background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */
}
header nav ul li:nth-of-type(6) a {
background:#d00110;
background-image: -moz-linear-gradient(top, #d00110, #da0116); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d00110),color-stop(1, #da0116)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')"; /* IE8 */
}
这就是我在页面中设置菜单的方式
<!-- header -->
<header>
<div class="container">
<img src="images/logo.jpg" WIDTH="500" HEIGHT="60" alt="Smith Screenprint">
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
</div>
</header>
这是我为妈妈开发的网站:P这是地址,所以你可以看看它在IE中做了什么 www.smithscreenprint.co.nz
答案 0 :(得分:1)
我将在这里出去,并假设您的问题是您的菜单项在IE 6,7和8版本中没有接收到任何背景。这是因为:nth-of-type()
选择器是这些浏览器不支持这些浏览器(仅在IE9中),因此这些浏览器会忽略忽略这些浏览器。您正在尝试为无法读取其所在选择器的旧浏览器应用后台规则。
如果你真的需要在IE中向后兼容,那么你将不得不采用老式的方式为你的菜单指定id="menu-one"
,id="menu-two"
等等(或类似的东西)项目
答案 1 :(得分:0)
知道什么版本的IE以及“Internet Explorer使用我的网站做有趣的事情”意味着什么会有所帮助。
我在IE8中查看过,看起来没问题。我认为您的问题出在IE7中。
IE支持:nth-of-type()。虽然,看起来你正在使用Dean Edwards的IE9来解决这个问题。
尝试替换它:
header nav {
float:right;
}
有了这个:
header img {
float: left;
}