1

我正在与（又一个）IE8 错误作斗争。

基本上，我有一个小的方形容器，里面有一个用 :before 和 :after 伪元素构建的箭头。HTML 是这样的：

<div class="container">
    <div class="arrow" />
</div>​

而 CSS 是

.container {
    height: 58px;
    width: 58px;
    background-color: #2a5a2a;
}

.arrow {
    padding-top: 7px;
}

.arrow:before {
    margin: 0 auto;
    content: '';
    width: 0;
    border-left: 12px transparent solid;
    border-right: 12px transparent solid;
    border-bottom: 13px gray solid;
    display: block;
}

.arrow:after {
    margin: 0 auto;
    content: '';
    width: 12px;
    background-color: gray;
    height: 14px;

    display: block;
}

现在，当我将鼠标悬停在容器上时，我希望其中的箭头改变颜色。我添加了这个 CSS：

.container:hover .arrow:after {
    background-color: white;
}

.container:hover .arrow:before {
    border-bottom-color: white;
}​

这就是问题开始的地方。这适用于大多数浏览器，但在 IE8 上， background-color 属性没有被覆盖。所以我只得到了新颜色的箭头尖端，而不是构成它“主体”的正方形。

为了让事情更有趣，如果我添加以下内容也将容器背景颜色更改为稍微不同的东西，那么一切都会开始工作并且箭头的背景颜色会发生变化！

.container:hover {
    background-color: #2a5a2b;
}

如果我只为容器设置 :hover 状态，并且设置它已经拥有的相同背景颜色，那么它不起作用。如果我想改变背景颜色，我必须改变它。

如果您想尝试一下，这里有一个 jsfiddle：http: //jsfiddle.net/Ke2S6/现在它与悬停时的容器具有相同的背景颜色，因此它不适用于 IE8。更改一个数字，它将开始工作。

所以......有什么想法吗？

4

0 回答 0