IE9:锚标签大小和悬停的问题

时间:2012-05-11 03:43:54

标签: html css navigation internet-explorer-9 drop-down-menu

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

  1. 顶级的锚标记未填充包含的li。一世 使用display:block,height:100%和width:100%,你会看到 在代码中。
  2. 顶级项目的悬停不会显示出来 较低级别的项目。悬停会更改字体和背景 虽然。
  3. 关于这两个主题有很多文章和论坛帖子 - 我希望我已经理解并已经实施了所讨论的解决方案。但也许我错过了一些简单的事情。

    css文件:dropdown-menu.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文件:dropdown-menu.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文件:sample.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>
    

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

    Prajesh

2 个答案:

答案 0 :(得分:0)

这篇文章Adding gradient to element breaks CSS functionality in IE的最后一行就是诀窍!以下是对未来可能面临类似问题的人们的一些值得注意的观察。

  1. 当然,IE过滤器渐变与ul的关系不是很好 或li - 意思是如果渐变应用于li,则li得到了 渐变,但其所有子项都隐藏(或不显示 将鼠标悬停在顶层li)上。
  2. 但是,如果应用过滤器 li内部的元素(例如li中的div), 然后是渐变和下拉工作。
  3. 在我的情况下,我希望我的顶级li在悬停时增加高度并且具有sub-ul     顶部开始在顶部李结束的地方。由于过滤器不是     最初工作,李没有充满任何背景     因此,顶级li和sub-ul之间存在差距。一世     应该遵循默认单位的最佳做法     背景,以防过滤器不起作用。当我这样做的时候     过滤器注释掉了,下拉工作正常(没有不连续性     在顶级li和sub-ul之间。)
  4. 我最初遵循的建议很高兴Drop down menu doesn't work in IE9被证明是无解决方案。在过滤器前添加ms或orms或其他任何内容基本上只是注释掉过滤器行。

答案 1 :(得分:0)

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