IE 的 CSS 样式菜单问题
Posted
技术标签:
【中文标题】IE 的 CSS 样式菜单问题【英文标题】：CSS Style Menu issue with IE 【发布时间】：2013-11-25 16:47:56 【问题描述】：我对 html CSS 响应式菜单和 Internet Explorer 有一个奇怪的问题。 如果我在 Internet Explorer 中看到菜单的 html，在 IE 和 Firefox 中，颜色正确，但如果我在我的 ASP.NET 网站中插入相同的 html 页面，然后使用本地 Visual Studio 实例通过 Internet Explorer，我看到了菜单的颜色不是红色而是蓝色！！我只是使用菜单的样式。
这是菜单演示页面的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<title>Demo menu</title>
<style type="text/css">
body
font-family: Helvetica, Arial, sans-serif;
font-size: 13px
</style>
<link type="text/css" rel="stylesheet" href="js-css-menu.css" media="screen" />
</head>
<body>
<p><b>Responsive CSS3 Menu with Dropdown (Horizontal and Vertical)</b></p>
<ul class="js-css-menu shadow responsive">
<li><a href="#">Link</a></li>
<li class="current"><a href="#">Current</a></li>
<li><a href="#">Link with Menu</a>
<div>
<ul>
<li><b>Col 1</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
<ul>
<li><b>Col 2</b></li>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Link</a>
</ul>
</body>
</html>
使用这种 CSS 样式：
/* PRIMARY MENU style */
.js-css-menu
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
border: 1px solid #900000;
display: inline-block;
.js-css-menu, .js-css-menu ul, .js-css-menu li
list-style: none;
padding: 0;
margin: 0;
.js-css-menu a
text-decoration: none;
-moz-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
.js-css-menu > li
display: inline-block;
float: left;
.js-css-menu > li > a
color: #fefefe;
text-shadow: 0 -1px 0 maroon;
background-color: #dd0000;
background-image: linear-gradient(top, #dd0000 20%, #aa0000);
background-image: -moz-linear-gradient(top, #dd0000 20%, #aa0000);
background-image: -webkit-linear-gradient(top, #dd0000 20%, #aa0000);
background-image: -o-linear-gradient(top, #dd0000 20%, #aa0000);
background-image: -ms-linear-gradient(top, #dd0000 20%, #aa0000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#dd0000) 20%, to(#aa0000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
padding: 10px 15px;
display: block;
.js-css-menu > li:hover > a
background-color: #fa0000;
background-image: linear-gradient(top, #fa0000 20%, #af0000);
background-image: -moz-linear-gradient(top, #fa0000 20%, #af0000);
background-image: -webkit-linear-gradient(top, #fa0000 20%, #af0000);
background-image: -o-linear-gradient(top, #fa0000 20%, #af0000);
background-image: -ms-linear-gradient(top, #fa0000 20%, #af0000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fa0000) 20%, to(#af0000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
.js-css-menu > li > a:active
background-color: #aa0000;
background-image: linear-gradient(top, #aa0000 20%, #cc0000);
background-image: -moz-linear-gradient(top, #aa0000 20%, #cc0000);
background-image: -webkit-linear-gradient(top, #aa0000 20%, #cc0000);
background-image: -o-linear-gradient(top, #aa0000 20%, #cc0000);
background-image: -ms-linear-gradient(top, #aa0000 20%, #cc0000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#aa0000) 20%, to(#cc0000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
.js-css-menu > li.current > a
background-color: #880000;
background-image: linear-gradient(top, #880000 20%, #aa0000);
background-image: -moz-linear-gradient(top, #880000 20%, #aa0000);
background-image: -webkit-linear-gradient(top, #880000 20%, #aa0000);
background-image: -o-linear-gradient(top, #880000 20%, #aa0000);
background-image: -ms-linear-gradient(top, #880000 20%, #aa0000);
background-image: -webkit-gradient(linear, left top, left bottom, from(#880000) 20%, to(#aa0000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='$to', EndColorStr='$from');
box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 7px rgba(0, 0, 0, 0.25);
/* SUBMENU */
.js-css-menu > li div
border-top: 1px solid #900000;
display: block;
position: absolute;
visibility: hidden;
opacity: 0;
-moz-transition: all 0.15s ease-in-out;
-webkit-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
-ms-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
.js-css-menu > li div a
color: #ddd;
.js-css-menu > li div a:hover, .js-css-menu > li div a:focus
color: #fefefe;
.js-css-menu > li div ul
float: left;
.js-css-menu > li div ul li
line-height: 1.5em;
.js-css-menu > li div ul:not(:first-child)
margin-left: 20px;
.js-css-menu > li:hover div, .js-css-menu > li:focus div
color: #fefefe;
background: #b00000;
padding: 10px 15px;
visibility: visible;
opacity: 1;
/* VERTICAL style */
.js-css-menu.vertical
width: 100px;
/* Adjust the width of the vertical menu */
.js-css-menu.vertical > li
display: block;
float: none;
position: relative;
.js-css-menu.vertical > li div
width: 150px;
left: 101px;
/* Adjust the left value according to the width of the vertical menu */
top: 0;
/* ROUNDED style */
.js-css-menu.rounded
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
.js-css-menu.rounded > li:first-child > a
border-top-left-radius: 2px;
-moz-border-radius-topleft: 2px;
-webkit-border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
.js-css-menu.rounded > li:last-child > a
border-top-right-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
.js-css-menu.rounded > li div
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
.js-css-menu.rounded.vertical > li:first-child > a
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-top-right-radius: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-top-right-radius: 2px;
.js-css-menu.rounded.vertical > li:last-child > a
border-top-right-radius: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-bottom-left-radius: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-bottom-left-radius: 2px;
/* SHADOW style */
.js-css-menu.shadow, .js-css-menu.shadow div
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
/* RESPONSIVE style */
@media (max-width: 480px)
/* To adjust the "breaking point" of the responsive menu, change 480px to a value of your choosing. */
.js-css-menu.responsive, .js-css-menu.responsive > li
width: auto!important;
display: block;
float: none;
.js-css-menu.responsive > li:first-child > a
border-bottom-left-radius: 0 !important;
-moz-border-radius-bottomleft: 0 !important;
-webkit-border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
-moz-border-radius-bottomright: 0 !important;
-webkit-border-bottom-right-radius: 0 !important;
.js-css-menu.responsive > li:last-child > a
border-top-left-radius: 0 !important;
-moz-border-radius-topleft: 0 !important;
-webkit-border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
-moz-border-radius-topright: 0 !important;
-webkit-border-top-right-radius: 0 !important;
.js-css-menu.responsive > li div
display: none!important;
【问题讨论】：
使用开发者工具检测应用了哪些样式。有“跟踪样式”选项卡，您可以在其中查看应用于所选节点的所有规则。 【参考方案1】：您尚未设置标准 CSS 链接颜色，因此将其设置为通用蓝色。
将它添加到您的 CSS 中，使用您希望链接的颜色：
a:link color: #FF0000; text-decoration: none;
a:hover color: #FF0000;text-decoration: none;
a:active color: #FF0000;text-decoration: none;
a:visited color: #FF0000; text-decoration: none;
【讨论】：
这是链接：jsfiddle.net/XMKmQ 在 Firefox 和 IE 中尝试。如您所见，在 Firefox 中为红色，但在 IE 中为蓝色【参考方案2】：HTML 代码中有一个未闭合的括号。
✮✮ 总是 ✮✮ validate您的代码，以确保没有错字！
请参阅working demo。
【讨论】：
以上是关于IE 的 CSS 样式菜单问题的主要内容，如果未能解决你的问题，请参考以下文章
带有水平子菜单的纯 html css 菜单。悬停在 IE 中无法正常工作