Question

我正在进行网站开发，目前使用CSS设计面包屑路径。但是，我在Internet Explorer 8中遇到了这个奇怪的错误，我无法弄清楚它为什么会发生。为了说明，这里有一些图像：

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

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

在悬停之前它显示正常，但是一旦鼠标移过它，它就会疯狂。

我已经浏览了CSS代码，并且与hover相关的唯一属性是颜色，背景，溢出和文本修饰。与边距，填充，高度等无关。

有什么可能导致这种情况？

相关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过滤器，这个bug会起作用。

看看这是否有效（我希望你能控制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中的图像在此中起作用。

Internet Explorer 8产生奇怪的CSS错误：悬停

1 个答案: