IE CSS 错误：background-color: transparent 与 background-color 的行为不同：（任何其他颜色）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3997065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
提问by RGBK
I have been struggling to find out why this rollover is not behaving as it should in IE8.
我一直在努力找出为什么这种翻转在 IE8 中没有表现出应有的表现。
Go here: http://baked-beans.tvin IE8, you'll see that the rollover only works on the lower half of the thumbnails.
转到这里：http: //baked-beans.tv在 IE8 中，您会看到翻转仅适用于缩略图的下半部分。
Btw, this is not activated by an <a>tag but by a :hoverfor the <div>.
顺便说一句，这不是由一个激活的<a>标签，但通过:hover对<div>。
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)
我不明白的是为什么它只适用于图像下方的 div 下半部分，而不适用于图像（图像不是 z 索引，所以这不是问题）
As soon as I change the background-colorto 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.
一旦我将其更改为background-color透明以外的任何其他内容，它就会 100% 工作。所以这让我大吃一惊......为什么下半部分而不是上半部分，而且只有当我将 bg-color 设置为透明时？！必须喜欢 Internet Explorer。
This works as it should on every other browser (the entire square acts as a rollover)
这在其他所有浏览器上都可以正常工作（整个方块充当翻转）
Here's the CSS:
这是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;
}
采纳答案by meder omuraliev
Try faking a background image or setting it to a blank.gif insteadof making it transparent.
尝试伪造背景图像或将其设置为 blank.gif而不是使其透明。
background:url(blank.gif);
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
见http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
回答by Mathijas
The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparentinto background: transparent. Very nasty.
问题是一段时间（一周？两周？）IE 已经改变了它解释背景颜色的方式。似乎您不能说颜色是透明的，而是整个背景。所以你应该background-color: transparent改成background: transparent. 很恶心。
回答by Tony Cheng
The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hovertake effects. The problem is fixed with giving the element the following style.
同样的问题也出现过，悬停在透明元素的空白区域不会使相关的css规则生效hover。通过为元素提供以下样式来解决问题。
background-color: rgba(0, 0, 0, 0.001);
回答by fitz0019
You can use an 1x1 transparent gif as a datauri if you'd rather.
如果您愿意，您可以使用 1x1 透明 gif 作为 datauri。
background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
Up to you which one you'd prefer, this works and is an alternative to the selected answer.
取决于您更喜欢哪个，这可行并且是所选答案的替代方案。
回答by Chris Bentley
You could also try changing the hover selector to :
您还可以尝试将悬停选择器更改为：
.thumb_container:hover .cat_rollout {...}
so that the parent containment div is the element reacting to the hover.
这样父容器 div 就是对悬停做出反应的元素。
