小贝子编程

IE9:锚标记大小调整和悬停的问题



我正在尝试创建一个导航栏 - 使用通常的东西。它在Firefox和Chrome中按预期工作，但在IE9中则不然。显然有两个问题：

  1. 顶级的锚标记不会填充包含 li。我已使用显示：块，高度：100%和宽度：100%，如您所见在代码中。
  2. 顶级项目的悬停不会显示较低级别的项目。悬停会更改字体和背景虽然。

关于这两个主题有很多文章和论坛帖子 - 我希望我已经理解并已经实施了所讨论的解决方案。但也许我错过了一些简单的东西。

css 文件：下拉菜单.css

#navigation-ul {
padding: 0;
margin: 0;
list-style: none;
height: 35px; /* this height must match the #navigation-ul li.top height */ 
position: relative;
z-index: 200;
font-family: Arial,Helvetica,sans-serif;
}

#navigation-ul li.top {
display: block;
float: left;
height: 35px;
width: 150px;

/* This was the original size
height: 30px;
width: 100px;
*/

background-color: #E1E1E3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",
    endColorstr="#C4C4C4" ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF),
    to(#C4C4C4) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #C4C4C4);
/* for firefox 3.6+ */
border-right: 4px groove #D1D1D1;
}

#navigation-ul li a.top_link {
display: block;
float: left;
height: 100%;
width: 100%; 
line-height : 33px;
color: #003570;
text-decoration: none;
font-size: 14px;
font-weight: bold;
padding: 0;
cursor: pointer;
text-align: center;
line-height: 33px;
}

#navigation-ul li a.top_link span {
color: #003570;
font-size: 14px;
float: left;
display: block;
padding: 0;
height: 100%;
width: 100%;
}

#navigation-ul li a.top_link span.down {
color: #003570;
font-size: 14px;
float: left;
display: block;
padding: 0;
height: 100%;
width: 100%;
}

#navigation-ul li:hover a.top_link {
height: 100%;
color: #FF0000;
text-decoration: underline;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",
    endColorstr="#FFFFFF" ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),
    to(#FFFFFF) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);
/* for firefox 3.6+ */
}

#navigation-ul li:hover a.top_link span {
height: 150%;
color: #FF0000;
text-decoration: underline;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",
    endColorstr="#FFFFFF" ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),
    to(#FFFFFF) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);
/* for firefox 3.6+ */
}

#navigation-ul li:hover a.top_link span.down {
height: 150%;
color: #FF0000;
text-decoration: underline;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",
    endColorstr="#FFFFFF" ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),
    to(#FFFFFF) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);
/* for firefox 3.6+ */
}





/* Default list styling */
#navigation-ul li:hover {
position: relative;
z-index: 200;
}

#navigation-ul li:hover ul.sub {
left: 0px;
top: 50px; /* (top level li height is YYpx) + (xx% of that (= 0.xx*YY px) height increase on hover) */
padding: 0;
white-space: nowrap;
width: 200px;
height: auto;
z-index: 300;
}

#navigation-ul li:hover ul.sub li {
display: block;
height: 30px;
border-bottom: 1px solid #FF0000;

background-color: #E1E1E3; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C4C4C4",
    endColorstr="#FFFFFF" ); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#C4C4C4),
    to(#FFFFFF) ); /* for webkit browsers */
background: -moz-linear-gradient(top, #C4C4C4, #FFFFFF);

position: relative;
float: left;
width: 200px;
font-weight: normal;
}

#navigation-ul li:hover ul.sub li a {
display: block;
font-size: 12px;
height: 100%;
width: 100%;
line-height: 18px;
text-indent: 5px;
color: #003570;
text-decoration: none;
}

#navigation-ul li ul.sub li a.fly {
/* background: #bbd37e url(arrow.gif) 80px 6px no-repeat; */

}

#navigation-ul li:hover ul.sub li a:hover {
color: #FF0000;
font-weight: bold;
text-decoration: underline;
}

/* Hover effect over the 2nd level li*/
#navigation-ul li:hover ul.sub li a.fly:hover {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",
    endColorstr="#C4C4C4" ); /* for IE */
background: -webkit-gradient(linear, left top, right top, from(#FFFFFF),
    to(#C4C4C4) ); /* for webkit browsers */
background: -moz-linear-gradient(left, #FFFFFF, #C4C4C4);

color: #FF000;
font-weight: bold;
width: 105%;
border-bottom: 1px solid #FF0000;
text-decoration: underline;
}

#navigation-ul li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover li:hover ul,#navigation-ul li:hover li:hover li:hover li:hover li:hover ul
{
left: 210px; /* (higher level li width is 200px) + 5% (=10px) increase during hover */
top: 0px;
background: #C4C4C4;
padding: 0px;
margin-bottom: 1px;
white-space: nowrap;
/* width: 150px; */
z-index: 400;
height: auto;
}

#navigation-ul ul,#navigation-ul li:hover ul ul,#navigation-ul li:hover li:hover ul ul,#navigation-ul li:hover li:hover li:hover ul ul,#navigation-ul li:hover li:hover li:hover li:hover ul ul
{
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}

/* Hover effect over the 2nd level li - going from 2nd level to 3rd level*/
#navigation-ul li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover li:hover a.fly,#navigation-ul li:hover li:hover li:hover li:hover li:hover a.fly
{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF",
    endColorstr="#C4C4C4" ); /* for IE */
background: -webkit-gradient(linear, left top, right top, from(#FFFFFF),
    to(#C4C4C4) ); /* for webkit browsers */
background: -moz-linear-gradient(left, #FFFFFF, #C4C4C4);

color: #FF000;
font-weight: bold;
width: 105%;
border-bottom: 1px solid #FF0000;
text-decoration: underline;
}

#navigation-ul li:hover li:hover li a.fly,#navigation-ul li:hover li:hover li:hover li a.fly,#navigation-ul li:hover li:hover li:hover li:hover li a.fly
{
background: #bbd37e url(arrow.gif) 80px 6px no-repeat;
color: #000;
border-color: #bbd37e;
}

javascript 文件：下拉菜单.js

SampleHover = function() {

var cssRule;

var newSelector;

for (var i = 0; i < document.styleSheets.length; i++) {

    for (var j = 0; j < document.styleSheets[i].rules.length ; j++) {

        cssRule = document.styleSheets[i].rules[j];

        if (cssRule.selectorText.indexOf("li:hover") != -1) {

            newSelector = cssRule.selectorText.replace(/li:hover/gi, "li.hover");
            document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
        }
    }
}

var liElements = document.getElementById("navigation-ul").getElementsByTagName("li");

for ( var i = 0; i < liElements.length; i++ ) {

    liElements[i].onmouseover = function() {

        this.className = this.className + " hover";
    };

    liElements[i].onmouseout = function() {

        this.className = this.className.replace(new RegExp(" hover\b"), "");
    };
}
};

if (window.attachEvent) {

window.attachEvent("onload", SampleHover); 
}

html 文件：示例.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sample</title>
<meta name="description" content=""></meta>
<meta name="keywords" content=""></meta>
<meta name="robots" content="index, follow"></meta>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="sample.css"
    type="text/css" title="Sample Style" media="screen, print"></link>
<link rel="stylesheet" href="dropdown-menu.css"
    type="text/css" />
<script type="text/javascript" src="dropdown-menu.js"></script>
</head>


<body style="align: CENTER;">
<div id=main style="width: 960px; margin: 0 auto;">
    <div id=header>
<div id="navigation-div" style="padding-bottom: 5px; margin-bottom: 5px;">
<!--  <span class="preload1"></span> <span class="preload2"></span> -->
<ul id="navigation-ul"
    style="display:inline-block; border: 1px solid #D1D1D1; margin-left: 0px; border-radius: 5px;">
    <li class="top" style="border-radius: 5px 0 0 5px;"><a
        class="top_link" href="/index">Home</a></li>

    <li class="top"><a id="Solutions" class="top_link down"
        href="/solutions"><span class="down">Solutions</span></a>
        <ul class="sub">
            <li><a class="fly" href="/solutions/business">Business
                    Solutions</a>
                <ul>
                    <li><a href="/solutions/business/investment-decision">Investment
                            Decisions</a></li>
                    <li><a href="/solutions/business/product-mgmt">Product
                            Management</a></li>
                </ul></li>
            <li><a class="fly" href="/solutions/software">Software
                    Solutions</a></li>
            <li><a class="fly" href="/solutions/engineering">Engineering
                    Solutions</a></li>
        </ul></li>

    <li class="top" ><a
        id="Industries" class="top_link" href="/industries"><span
            class="down">Industries</span></a></li>
    <li class="top" ><a
        id="KnowledgeBase" class="top_link" href="/knowledgebase"><span
            class="down">KnowledgeBase</span></a></li>
    <li class="top" style="border: none; width: 342px; border-radius: 0 5px 5px 0;"></li>
</ul>
</div>
</div>
</body>
</html>

如果您将这三个文件保留在同一目录中，您应该能够重现我所看到的内容。谢谢你的帮助。

普拉杰什

这篇文章的最后一行 向元素添加渐变会破坏 IE 中的 CSS 功能成功了！以下是一些值得注意的观察结果，供将来可能面临类似问题的人使用。

  1. 当然，IE滤镜梯度与ul 不太吻合或 li - 意思是如果将梯度应用于 Li 时，li 将获得渐变，但其所有子项都隐藏(或不显示在将鼠标悬停在顶级 Li 上(。
  2. 但是，如果将过滤器应用于LI 内部的元素(例如 LI 内部的div(，然后渐变和下拉都工作。
  3. 就我而言，我希望我的顶级 li 在悬停时增加高度并拥有子 ul 顶部从顶部 li 结束的地方开始。由于过滤器不是 最初工作时，LI 没有任何背景 因此，最高层的LI和子UL之间存在差距。我 应该遵循拥有默认公寓的最佳实践 背景，以防过滤器不起作用。当我这样做时 过滤器注释掉了，下拉列表工作正常(没有中断 在顶级 li 和子 ul 之间(。
  4. 我最初遵循的建议并对下拉菜单在IE9中不起作用感到满意，结果证明这是一个没有解决方案。在过滤器前面添加 ms- 或 -ms 或任何与此相关的内容基本上只是注释掉过滤器行。
在

<head> 标记下添加此行代码 

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

喜欢这个 

<html>
   <head>
       <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <!-- Your codes / styles / scripts -->
       </head>
       <body>
         <!-- your codes-->
       </body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium