IE CSS Bug：背景颜色：透明的行为与背景颜色不同：（任何其他颜色）
我一直在努力找出为什么这种翻转在 IE8 中的表现不正常。
转到这里：http://baked-beans.tv 在 IE8 中，您会看到翻转仅适用于缩略图的下半部分。
顺便说一句，这不是由 标签激活的，而是由 的 :hover 激活的。
我不明白的是为什么它只适用于 div 的下半部分，图像下方，但不适用于图像（图像不是 z 索引，所以这不是问题）
一旦我更改 < code>background-color 除了透明之外的任何其他颜色，它都可以 100% 工作。所以这让我大吃一惊...为什么是下半部分，而不是上半部分，而且只有当我将背景颜色设置为透明时？！我一定会喜欢 Internet Explorer。
这在所有其他浏览器上都可以正常工作（整个方块充当翻转），
这是 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;
}
I have been struggling to find out why this rollover is not behaving as it should in 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, this is not activated by an <a> tag but by a :hover for the <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)
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)
Here's the 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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
尝试伪造背景图像或将其设置为空白.gif而不是使其透明。
请参阅http://work.arounds.org/issue/22 /定位锚点不可点击-ie6/
Try faking a background image or setting it to a blank.gif instead of making it transparent.
See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/
问题是一段时间以来（一周？两周？）IE 改变了它解释背景颜色的方式。看来你不能说颜色是透明的，而是整个背景。所以你应该将
background-color:transparent更改为background:transparent。非常讨厌。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: transparentintobackground: transparent. Very nasty.我们也遇到过同样的问题，将鼠标悬停在透明元素的空白区域上并不会使与
hover相关的 css 规则生效。通过为元素提供以下样式解决了该问题。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.您还可以尝试将悬停选择器更改为 :
，以便父容器 div 是对悬停做出反应的元素。
You could also try changing the hover selector to :
so that the parent containment div is the element reacting to the hover.
如果您愿意，可以使用 1x1 透明 gif 作为 datauri。
这取决于您更喜欢哪一个，这是有效的，并且是所选答案的替代方案。
You can use an 1x1 transparent gif as a datauri if you'd rather.
Up to you which one you'd prefer, this works and is an alternative to the selected answer.