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

时间:2015-12-14 13:07:05

标签: html css twitter-bootstrap

当我将鼠标悬停在导航链接" 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

1 个答案:

答案 0 :(得分:1)

尝试向listMenuItem添加padding: 0px。即使不清楚为什么,它也可以解决这个问题。也许它会触发IE浏览器的hasLayout属性。