IE CSS Bug: background-color: transparent的行为与background-color：(任何其他颜色)不同

Question

我一直在努力找出为什么这种翻转在IE8中没有表现出应有的行为。

转到这里：http://baked-beans.tv在IE8中，你会看到滚动只在缩略图的下半部分起作用。

顺便说一句，这不是由<a>标签激活的，而是由<div>的:hover激活的。

我不明白的是，为什么它只在div的下半部分起作用，在图像下面，而不是在图像上(图像没有z索引，所以这不是问题)

只要我把background-color改成透明以外的任何东西，它就能100%地工作。这让我大吃一惊。为什么是下半部分，而不是上半部分，而且只有当我将bg-color设置为透明时？！一定会喜欢Internet浏览器的。

这就像在其他浏览器上一样工作(整个正方形就像翻转一样)

下面是CSS：

.cat_rollout {
    position: absolute;
    float:left;
    top:0;
    left:0;
    min-height:274px;
    min-width:274px;
    font-size: 0;
    background-color: transparent;
}

.cat_rollout:hover {
    background-image: url(images/rollover.png);
    min-width:254px;
    min-height:242px;
    padding-left: 20px;
    color: white;
    font-size: 21px;
    font-weight: normal;
    line-height: 24px;
    padding-top: 34px;
}

Answer 1

尝试伪造背景图像或将其设置为blank.gif 而不是使其透明的。

background:url(blank.gif);

请参阅http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/

Answer 2

问题是，在一段时间内(一周？两周？)IE改变了它解释背景颜色的方式。似乎你不能说，颜色是透明的，而是整个背景。所以你应该把background-color: transparent改成background: transparent。非常令人讨厌。

Answer 3

同样的问题也发生了，当悬停在透明元素的空白区域时，与hover相关的css规则不会生效。这个问题是通过赋予元素以下样式来修复的。

background-color: rgba(0, 0, 0, 0.001);