IE CSS Bug：background-color：transparent与background-color不同：（任何其他颜色） [英] IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

问题描述

我一直在努力找出为什么这个翻转不是在IE8应该的行为。

I have been struggling to find out why this rollover is not behaving as it should in IE8.

转到这里： http://baked-beans.tv 在IE8，你会看到翻转只适用于缩略图的下半部分。

Go here: http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.

Btw，这不是由< a> 标记激活，而是由 ：hover 代表< div> 。

Btw, this is not activated by an <a> tag but by a :hover for the <div>.

out是为什么它只工作在div的下半部分，下面的图像，但不是在图像上（图像不是z索引，所以不是问题）

What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)

只要我将 background-color 改为除透明以外的其他任何东西，它工作100％。所以这只是打击我的想法...为什么下半部分，但不是上半部分，只有当我设置bg颜色透明吗？很喜欢Internet Explorer。

As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.

这样适用于其他所有浏览器（整个广告单元作为翻转）

This works as it should on every other browser (the entire square acts as a rollover)

这里是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;
}

推荐答案

尝试伪造背景图片

background:url(blank.gif);

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

这篇关于IE CSS Bug：background-color：transparent与background-color不同：（任何其他颜色）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！