Internet Explorer 8 在 :hover 上产生奇怪的 CSS 错误

Question

我正在做网站开发，目前正在使用 CSS 设置面包屑路径的样式。但是，我在 Internet Explorer 8 中遇到了这个奇怪的错误，我不知道为什么会这样。为了说明，这里有一些图片：

这是其中一个面包屑在悬停时的样子：http://i.imgur.com/Lrr5Qo0.png（在 Chrome 中拍摄的图像）

在 Internet Explorer 中，这是悬停时的样子：http://i.imgur.com/V5dzdcX.png

它在悬停之前显示良好，但是一旦鼠标移到它上面，它就会发疯。

我浏览了 CSS 代码，与 :hover 相关的唯一属性是颜色、背景、溢出和文本装饰。与margin、padding、height等无关。

可能是什么原因造成的？

相关 HTML：

<div class="headtitle pull-left">
    <h1 id="pageTitle" class="ms-core-pageTitle">

    CX Team

    </h1>
    <ul class="s4-breadcrumb">
        <li class="s4-breadcrumbRootNode">
            <span class="s4-breadcrumb-arrowcont">
                <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
            </span>
            <a class="s4-breadcrumbRootNode" href="/sites/cc/Pages/index.aspx">Connect</a>
            <ul class="s4-breadcrumbRootNode">
                <li class="s4-breadcrumbNode">
                    <span class="s4-breadcrumb-arrowcont">
                        <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                    </span>
                    <a class="s4-breadcrumbNode" href="/sites/cc/residential/Pages/index0709-9951.aspx">Residential</a>
                    <ul class="s4-breadcrumbNode">
                        <li class="s4-breadcrumbNode">
                            <span class="s4-breadcrumb-arrowcont">
                                <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                            </span>
                            <a class="s4-breadcrumbNode" href="/sites/cc/residential/customerexperience/Pages/default.aspx">Customer Experience</a>
                            <ul class="s4-breadcrumbNode">
                                <li class="s4-breadcrumbCurrentNode">
                                    <span class="s4-breadcrumb-arrowcont">
                                        <img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" />
                                    </span>
                                    <a class="s4-breadcrumbCurrentNode" href="/sites/cc/residential/customerexperience/Pages/CX-Team.aspx">CX Team</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

不幸的是，我无法控制这一点；它是由 Sharepoint 动态创建的（我不得不使用它）。

CSS：

.s4-breadcrumb a:hover {
    overflow:auto\9;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600');
    background-image:-moz-linear-gradient(top,#F90,#F60);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60));
    background-image:-o-linear-gradient(top,#F90,#F60);
    background-image:linear-gradient(to bottom,#F90,#F60);
}

.v4master .s4-breadcrumbNode a,
.v4master .s4-breadcrumbCurrentNode a,
.v4master .s4-breadcrumbRootNode a,
.v4master .s4-breadcrumbNode a:hover,
.v4master .s4-breadcrumbCurrentNode a:hover,
.v4master .s4-breadcrumbRootNode a:hover {
    color:white !important;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    line-height:normal;
}

ul.s4-breadcrumb a {
    line-height:40px;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-bottom:0;
}

ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
    margin-bottom:14px;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-left:0;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-right:0;
}

ul.s4-breadcrumb,
ul.s4-breadcrumb ul {
    margin-top:0;
}

ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
    margin-top:10px;
}

.s4-breadcrumb a {
    padding-left:5px;
}

.headtitle > ul.s4-breadcrumb {
    padding-left:10px;
}

.headtitle > ul.s4-breadcrumb {
    padding-left:0\9;
}

.s4-breadcrumb {
    padding-left:15px;
}

.s4-breadcrumb a {
    padding-right:5px;
}

.s4-breadcrumb {
    padding-right:15px;
}

.s4-breadcrumb a:hover {
    text-decoration:none;
}

Answer 1

我看到了两个可能导致它的原因：带有仅限 IE9 的 hack 的溢出声明，以及缺少修复旧 IE hasLayout 错误的声明，如果您使用 CSS 过滤器会出现该错误。

看看这是否可行（我希望你确实可以控制 CSS）：

.s4-breadcrumb a:hover {
    overflow: auto; /* or: hidden */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600');
    zoom: 1; /* cure for the bug */
    background-image:-moz-linear-gradient(top,#F90,#F60);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60));
    background-image:-o-linear-gradient(top,#F90,#F60);
    background-image:linear-gradient(to bottom,#F90,#F60);
} 

.
如果这不能治愈它，请创建一个http://jsbinb.com。如果您为图像指定宽度、高度和边框，那么您不能自己上传它们并不重要。也就是说：如果您的 HTML 中的图像在其中发挥作用。