制作水平响应式菜单，li在IE中的重叠答案

【问题标题】：Made horizontal responsive menu, li's overlap in IE制作水平响应式菜单，li在IE中的重叠
【发布时间】：2017-02-17 23:17:04
【问题描述】：

!(http://i.imgur.com/nyyRhJX.jpg)! [互联网浏览器]

这个 css 在 Safari、Chrome、Firefox 中工作，但即使在最新的 IE 11 中也无法工作。li 重叠，它会在列表顶部创建一个空格。如果我去掉 li 上的高度，文本不再重叠。相反，我在每个 li 上得到巨大的填充，除非我设置一个高度，否则我无法摆脱。

如果我应该提供更多信息，请告诉我。谢谢。

下面是李的

.dropdown-menu > li {
    padding-left: 15px;
    height:25px;
    zoom:1;
    list-style:none;
    font-size:14px;
}
*, *::before, *::after{
    box-sizing:border-box;
}
.five-col{
    -moz-column-count:5;
    -webkit-column-count:5;
}
*********This is on the li > a
.dropdown-menu > li > a{
    display:block;
    padding:3px 20px;
    clear:both;
    font-weight:normal;
    line-height:1.428;
    white-space:nowrap;
}

********HTML is as follows
<div id="#category-list">
    <ul class="nav navbar-nav">
        <li>
            <a>Main Link</a>
            <ul class="dropdown">
                <li><a>link</a></li>
                <li><a>link</a></li>
                <li><a>link</a></li>
                ... etc.
            </ul>
        </li>
    </ul>
</div>

【问题讨论】：

标签： css internet-explorer html-lists padding

【解决方案1】：

访问下面的链接，它会帮助你。

http://css3menu.com/neat-red.html#

【讨论】：

您建议的菜单没有响应。
响应式菜单教程cssmenumaker.com/blog/responsive-menu-tutorial

【解决方案2】：

我通过 ie hack 设法解决了这个可怕的错误（惊喜！）。

修复：内联块黑客。 display: inline-block 仅适用于自然具有 display: inline; 的 IE。规则。如果不是这种情况，IE 将处理声明的 inline-block 元素。然后，在单独的规则中，再次将元素转回块。

教程在这里： http://www.kovioko.net/tutorial/extra-spacing-and-incorrect-height-on-list-items-in-internet-explorer

查看最后一个名为 The inline-block hack 的解决方案，这就是对我有帮助的解决方案。祝你好运。

【讨论】：