Question

您好我刚刚重新设计我的网站以包含下拉菜单，但我今天了解到IE 8及以下版本并未显示任何接近正确的位置。它对每个其他浏览器的显示都很好。我不知道我哪里出错了，但我一直在调试，但一直无法解决。

非常感谢任何帮助！

这是一个jsfiddle与我的html和css：http://jsfiddle.net/scTqy/

以下是实际网站的链接：http://www.hearditfrom.com

（这是js小提琴）

这是我的html / php：

        <nav id="hb2_nav">
       <ul>
    <li><a class="hb2_nav" href="category.php">Categories <span class="arrow-down"></span></a>
    <ul class="drop-shadow">
    <span class="category_column">
    <li><a href="category.php?category=1">U.S.</a></li>
    <li><a href="category.php?category=2">World</a></li>
    <li><a href="category.php?category=3">Business</a></li>
    <li><a href="category.php?category=4">Economy</a></li>
    <li><a href="category.php?category=5">Entertainment</a></li>
    </span>
    <span class="category_column">
    <li><a href="category.php?category=6">Health</a></li>
    <li><a href="category.php?category=7">History</a></li>
    <li><a href="category.php?category=8">Odd News</a></li>
    <li><a href="category.php?category=9">Politics</a></li>
    <li><a href="category.php?category=10">Science</a></li>
    </span>
    <span class="category_column_last">
    <li><a href="category.php?category=11">Special Reports</a></li>
    <li><a href="category.php?category=12">Sports</a></li>
    <li><a href="category.php?category=13">Technology</a></li>
    </span>

    </ul></li>
    <li><a class="hb2_nav" href="">Add </a></li>
    <li><a class="hb2_nav" href="">Edit </a></li>
    </ul>
    </nav>

这是我的css：

   #hb2_nav
   {
     font-size:18px;
     line-height: 55px;
     float:right;
     height:55px;
     margin:0px;
     margin-top:0px;
     padding:0px;
     display:inline;
    }

        #hb2_nav ul ul {
        display: none;
        color: #333;
    }

    #hb2_nav ul li:hover ul {
        display: block;
    }

    #hb2_nav ul {
        list-style: none;
        position: relative;
        display: inline-table;
    }

    #hb2_nav ul:after {
        content: ""; clear: both; display: block;
    }

    #hb2_nav ul li {
        float: left;
    }
    #hb2_nav ul li:hover {
        background: none;
    }
    #hb2_nav ul li:hover a {
        text-decoration:none;
        padding-left: 10px;
        padding-right:10px;
    }

    #hb2_nav ul li a {
        text-decoration:none;
        display: block; /*padding: 25px 40px;
        color: #757575; text-decoration: none;*/
    }

    #hb2_nav ul ul {
        background: #ffffff; /*#FFF8F0;*/ 
        border-radius: 0px; 
        padding: 0;
        position: absolute; 
        top: 100%;
        width:100%;
        min-width:250px;
        max-width: 400px;
        z-index:10000;
        border: 2px solid #999;
    }

    #hb2_nav ul ul:before {
        content:"";
        display:block;
        width:0;
        border:15px solid #999;
        border-color:transparent transparent #999 transparent;
        position:absolute;
        bottom:100%;
        left:20px;
        margin-left:-10px;
    }



    #hb2_nav ul ul li {
        float: none; 
        background: #ffffff;
        width: 100%;
        position: relative;
        text-align:left;
        font-size: 14px;
        line-height: 24px;
    }

    #hb2_nav ul ul li a {
        color: #333;
        padding: 10px 20px;
    }
    #hb2_nav ul ul li:hover a {
        background: #e8e8e8;
    }

Answer 1

您使用的是<nav>这是一个HTML5元素，IE8及以下版本不支持。

仅使用HTML4.01标签＆amp; JavaScript可以更好地支持旧浏览器。

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

下载IE 8及以下不起作用

1 个答案: