网站无法在 Internet Explorer 上运行

Question

我在侧边栏中有一个垂直菜单，悬停在子菜单上，但是在 IE 中，悬停菜单决定出现在页面中间。我使用的是 IE11，所以它不支持 IE only css。

我不确定是什么导致了问题..这里是该网站的 JSFiddle https://jsfiddle.net/2rhwgymx/

菜单是由纯 CSS 制作的，所以我认为这可能与侧边栏中的侧边元素的定位有关……但是侧边栏需要固定位置……

代码没有正确验证，但它只有像“”标签这样的小东西......这有关系吗？

任何帮助将不胜感激。

谢谢

 <div id="a">
                                                    <ul class="nav">
                    <li><a href="test7.php">Home</a></li>
                    <li><a href="grid.php">Solutions <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
                        <ul>
                            <li><a href="accounting.php">Accounting</a></li>
                            <li><a href="cloud.php">Cloud Accounting</a></li>
                            <li><a href="tax.php">Tax</a></li>
                            <li><a href="business.php">Business Planning</a></li>
                            <li><a href="future.php">Planning Your Future</a></li>
                        </ul>
                    </li>
                    <li><a href="about.php">About <i class="fa fa-angle-down" style="font-size: 12px;"></i></a>
                        <ul>
                            <li><a href="staff.php">Staff</a></li>
                            <li><a href="values.php">Our Values</a></li>

                        </ul>
                    </li>
                    <li><a href="blog.php">Blog</a></li>


                        <li><a href="contact.php">Contact</a></li>
                </ul>


                              </div>



     #a{
  width: 100%;
  margin-bottom: 50px;
  overflow: hidden;
    }

    #a ul{
    list-style:none;
     text-align: center;
       padding: 0px;
        }

    #a a{
    display: inline-block;
    text-align: center;
    padding: 4px;
    color:#fff;
    font-size:18px;
    padding-bottom:15px;
    text-decoration:none;
    font-weight:300;
    padding-top:10px;
    text-decoration:none;
    z-index:999999;
    width:100%;


    }

    #a a:hover {
  background:#b72629;
    }
    #a li{
    width:100%;
    }
    .nav{padding:none;}

    .nav ul{
    display:none;          /* HIDE ALL INNER UL */
    padding:0px;


    }
    .nav li:hover > ul{
    display:inline-block; 
    padding:0px;        /* SHOW INNER UL ON LI PARENT HOVER */

    position: absolute;
    background:#e95259;
      z-index: 10;

    width:100%;
        margin-left:100px;  
       margin-top: -48px; 
}

.nav li:hover > ul li hover{background:#b72629;}

Answer 1

这里的问题在于您定位子菜单的方式；你让它绝对定位，然后用边距偏移。这在 Microsoft Edge（Internet Explorer 的继任者）中的工作方式与在 Chrome 中的工作方式相同，但对于 IE，您需要采用不同的方法。

首先将嵌套列表定位到其父列表项。找到以下内容，然后进行带注释的编辑（注意，li 元素通常不需要width: 100%）：

#a li {
    width: 100%;
    position: relative; /* Add this line */
}

现在li 元素中绝对定位的ul 元素将根据li 元素定位，而不是根据最近定位的祖先元素或视口定位。

接下来，从以下内容中删除边距，改为使用left 和top 定位：

.nav li:hover > ul {
    display:inline-block;
    padding: 0px;
    position: absolute;
    background: #e95259;
    z-index: 10;
    width: 100%;
    margin-left: 100px; /* Replace with `left: 200px;` */
    margin-top:  -48px; /* Replace with `top: 0;`      */
}

最后，我们要确保这些子菜单在显示时可见。找到以下内容，并删除负责隐藏这些元素的 overflow 属性：

#a {
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden; /* Remove */
}

Internet Explorer 11 中的结果 appears to work as expected。