IE9圆角和透明背景问题答案

【问题标题】：IE9 rounded corners and transparent background issuesIE9圆角和透明背景问题
【发布时间】：2012-04-22 14:54:10
【问题描述】：

我搜索了很多，但我真的找不到答案。

我到处都有更圆的边框，任何地方都很好，除了使用 img 作为背景的元素（图像有漂亮的圆角，但后面是某种黑色背景）。

图片便于理解问题：

我真的坚持这一点。有什么建议是这个 IE 问题还是我遗漏了什么？

灰色标题的 CSS 是这样的：

#header {
    background-image: url("images/bg-header.png");
    background-repeat: repeat-x;
    border-radius: 4px 4px 0 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: bold;
    height: 46px;
    line-height: 46px;
    padding: 0 0 0 15px;
    text-shadow: 0 -1px 0 #332829;
    width: 575px;
}

小提琴：

http://jsfiddle.net/2BnDR/2/

【问题讨论】：

你能创建一个重现问题的 jsFiddle 演示吗？
我也会努力去做的...
@bažmegakapa jsfiddle.net/2BnDR/2 --- 这不是 IE9，因为我无法复制它，我猜...
检查了您的演示，在 IE9 中没有发现问题。也许尝试添加那个红色圆圈。

标签： css internet-explorer-9

【解决方案1】：

试试这个吧：

#DivThatImageIsIn img{
  border-radius: same as div;
}

【讨论】：

我已经发布了标题的 CSS... 希望对您有所帮助。
jsfiddle.net/2BnDR/2 --- 这不是 IE9，因为我无法复制它，我猜...

【解决方案2】：

我发现 IE9 确实存在奇怪的黑色背景环绕元素和错误，就像您在上面的打印屏幕上看到的那样。当您在同一元素上有 box-shadow 或 text-shadow + 过滤器时。

我已经从我的 CSS 中删除了所有过滤器，它就像魅力一样。

例如。

.header {
    filter: dropshadow(color=#3e3132, offx=0, offy=-1); /* delete this one and it works */
    text-shadow: 0px -1px 0px #3e3132;
}

【讨论】：

+1 我也遇到了这个问题，在你的回答中找到了原因