IE11 CSS - 悬停某些链接时导航 div 移动答案

【问题标题】：IE11 CSS - navigation div moves when hovering certain linksIE11 CSS - 悬停某些链接时导航 div 移动
【发布时间】：2015-12-14 22:08:48
【问题描述】：

当我将鼠标悬停在导航链接“dienstleistungen 等”上时在 IE11 中，导航 div 向下移动到底部并留有很大的边距。

我尝试过： - 从 boostrap.min.css 中的所有 boostrap col 中删除 position: relative。

同样的问题。有什么想法吗？

IE8 Works 和任何其他浏览器。

这里是html：

<div class="col-sm-4 hidden-xs">
                <a href="index.html">
                    <img src="img/logo.jpg" align="middle" id="logo-lg" alt="Logo Lemag Treuhand">
                </a>
                <ul class="listMenuItem">
                    <li class="listMenuChild">
                        <a href="content/services.html" class="listMenuChild--title">Dienstleistungen</a>
                    </li>
                    <li class="listMenuChild">
                        <a href="content/about.html" class="listMenuChild--title">Über uns</a>

                    </li>
                    <li class="listMenuChild">
                        <a href="content/publications.html" class="listMenuChild--title">Publikationen </a>

                    </li>
                    <li class="listMenuChild">
                        <a href="content/tools.html" class="listMenuChild--title">Hilfsmittel </a>

                    </li>
                    <li class="listMenuChild">
                        <a href="content/contact.html" class="listMenuChild--title">Kontakt / Lageplan </a>
                    </li>

                </ul>
            </div>

CSS

/**
------------------
NAV
------------------
**/

.listMenuChild--title {
    font-size: 1.638em;
    margin-left: 20px;
}

.listMenuChild--subtitle {
    font-size: 14px;
    margin-right: -2px;
}

.sub-nav {
    margin-left: -7%;
}

.sub-nav li {
    list-style: none;
    margin-bottom: 2%;
    margin-top: 1%;
}

.listMenuChild {
    list-style-image: url("../img/bg_li.png");
    margin-top: 5%;
}

.listMenuChild--title:hover {
    list-style-image: url("../img/bg_li_h.png");
}

.listMenuChild:hover {
    list-style-image: url("../img/bg_li_h.png");
}

.active-bullet {
    list-style-image: url("../img/bg_li_h.png");
}

.actives {
    color: black;
}

.listMenuItem {
    margin-top: 18%;
    margin-left: 5%;
}

如需源码：

你找到它Here

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
好的，谢谢我更新问题
尝试使用ems 而不是percentages 作为顶部边缘。并确保将 ul 标签上的填充清零以用于 .listMenuItem CSS 规则。

标签： html css twitter-bootstrap

【解决方案1】：

尝试将padding: 0px 添加到listMenuItem。即使不清楚原因，这似乎也解决了问题。可能是触发了 IE 浏览器的 hasLayout 属性。

【讨论】：

不客气。此外，据我所知，IE 10 也发生了同样的情况，但 IE9 和 edge 却没有