IE9边框半径和背景渐变出现溢出问题

Question

据说IE9可以通过使用CSS3标准定义的border-radius来处理圆角。

那么边框半径和背景渐变的支持情况如何呢？是的，IE9将分别支持它们两个，但如果你将这两个混合在一起，渐变会溢出圆角。

我还发现阴影在具有圆角的框下面显示为实心黑色线条。

这里是在IE9中显示的图片:

我该如何解决这个问题？

- SigmaBetaTooth

---

感谢 @MikeP 和 @meanstreakuk 的建议。我想我正在寻找的答案更多地是关于IE何时真正支持渐变/圆角，或者如何让这两个一起工作。 - SigmaBetaTooth

你已经从@meanstreak那里得到了如何让这两个一起工作的答案。如果你想要更现实一些，SVG渐变作为背景图像比CSS渐变更有可能被所有浏览器完全支持，而CSS渐变仍在积极开发/讨论中。 - Kevin Peno

难以置信微软如此落后。时已2011年，IE仍在处理这种问题。在他们的网站上，他们说：“快速现在变得美丽”。当然它是。看看上面发布的图片。多么矩形美啊！ - SunnyRed

SunnyRed，嗯，在Chrome中，包含在具有圆角的元素中的内容会溢出到边角。实际上，现在已经是2012年了，浏览器仍然面临这种问题 :-) - Joey

@Joey：这是有意设计的；请参见此问题。 - BoltClock

@SunnyRed 现在是2013年，这个bug仍然存在 :( - Sliq

Answer 1

我也遇到了这个问题。另一个“解决方案”是在具有渐变和圆角的项目周围添加一个div。使该div具有相同的高度、宽度和圆角值。将溢出设置为hidden。基本上这只是一个遮罩，但对我有效。

HTML：

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS：

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

- user740128

---

这对我来说非常完美，并且比其他提议的解决方案要简单得多。 - Simon P Stevens

只是一个小注释，但是你的边框半径语句应该被反转以促进向前兼容性。我已经进行了编辑。 - Parris

з”ұдәҺжҹҗдәӣеҺҹеӣ пјҢжҲ‘дёҚеҫ—дёҚеҗ‘.maskж·»еҠ padding-bottom:1pxпјҢд»ҘйҳІжӯўChrome/WebkitеҲҮж–ӯеә•йғЁиҫ№жЎҶгҖӮ - Kevin Borders

工作得很好！谢谢！作为一个“陷阱”，在我的情况下，内部元素需要没有任何边距或边距：0...哈哈，那花了我一分钟。 - teewuane

我的解决方案使用相同的技术，但没有冗余的非语义化HTML代码。只是使用::before或::after伪元素。请查看下面的答案。 - Marakoss

Answer 2

这里是一种解决方案，它添加了一个背景渐变，并使用数据URI创建半透明图像来覆盖任何背景颜色。我已经验证它在IE9中正确地剪裁为边框半径。这比基于SVG的建议更轻量级，但缺点是不具备分辨率独立性。另一个优点：适用于您当前的HTML/CSS，不需要包含其他元素。

我通过网页搜索获得了一个随机的20x20渐变PNG，并使用在线工具将其转换为数据URI。所得到的数据URI比所有SVG混乱的CSS代码要小得多，甚至要小于SVG本身！（您可以使用条件样式、特定于浏览器的css类等仅在IE9上应用此条件。）当然，对于按钮大小的渐变生成PNG非常有效，但对于整个页面的渐变就不太实用了！

HTML：

<span class="button">This is a button</span>

CSS：

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}

- Steve Eisner

---

胜利者是...我猜如果我必须选择一个，那就是它了。我希望能看到更多关于IE何时实际支持其所支持的内容的信息。至于背景图像解决方案，我倾向于不引入图像来使IE表现正常。感谢大家提供的有用建议。 - SigmaBetaTooth

我发现设置 background-size: 100% 103%; background-position:center; 更好。两个值都为100％会在顶部和底部添加一些奇怪的边框。 - Morten Christiansen

不太确定为什么要使用数据URI而不是普通的图片？我猜测对于IE9用户来说，使用图片会意味着向服务器发送额外的请求，但是将所有这些额外字符发送给非IE9浏览器似乎有些浪费。作为一张图片，这个解决方案对我来说是有效的，但我很想知道其中的原理。 - Decoy

他的手动数据URI是某些CSS预处理器在部署时通常所做的。至于“这是什么样的丑陋骗局”，那绝对是胡说八道。SVG就像其他任何图像一样，只不过是矢量图像。因此，把SVG称为骗局，并建议使用PNG代替，是绝对没有意义的。为什么SVG更好？因为它具有分辨率独立性，这也是你使用border-radius而不是栅格化图像背景的原因。 - skrat

根据我的经验，如果IE9的安全级别设置为“高”，这似乎无法正常工作。 - Gary Stanton

Answer 3

我认为值得一提的是，在许多情况下，您可以使用插入的盒阴影来“伪造”渐变效果，并避免IE9中的难看边缘。这在按钮上特别有效。

请查看此示例：http://jsfiddle.net/jancbeck/CJPPW/31/

- Jan Beck

---

在我的情况下，这是一个非常好的解决方案，因为我只在一个按钮上使用它，并且需要像您绘制的渐变一样。我现在使用了针对gte IE9的条件注释，然后应用了 box-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);。 - Volomike

+1 鼓励创新思维。对选项卡和按钮效果显著。使用内嵌可以使渐变保持在元素内部。 - GlennG

这是我见过的最好的解决方案。纯CSS，不需要额外的元素或图像。 - Zaqx

不错的技巧，但是我网站上有很多渐变色。我不能为了愚蠢的IE而改变它们。 - Mehmet Fatih Yıldız

Answer 4

您还可以使用CSS3 PIE来解决这个问题： http://css3pie.com/ 当然，如果您只需要一个带有圆角和背景渐变的单个元素，则可能过度了，但如果您在页面上结合了许多常见的CSS3功能并希望轻松支持IE6+，则可以考虑此选项。

- Louis L.

---

即使使用了css3pie和ie9，我仍然看不到渐变效果。我可以看到圆角和阴影，但没有渐变。 - Kevin

Answer 5

我也遇到了这个bug。我的建议是在ie9中使用重复的背景图片来创建渐变。IE9可以在圆角边框后正确平铺图像（RC1版本已经支持）。

我不明白为什么要写100行代码来替换1行CSS，这并不简单或优雅。SVG很酷，但为什么要通过所有这些方式来实现渐变背景，而多年来已存在更简单的方案呢。

- MikeP

Answer 6

只需使用一个包装 div（圆角和溢出隐藏）来剪辑 IE9 的半径。 简单易用，可跨浏览器使用。SVG、JS 和条件注释是不必要的。

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}

- Brian Lewis

Answer 7

我也遇到了同样的问题，发现IE无法同时渲染边框半径和渐变，二者会冲突。解决这个问题的唯一方法是删除滤镜，通过SVG代码使用渐变，仅限于IE浏览器。

您可以从 Microsoft 的这个网站（专门用于将渐变转换为SVG）获取SVG代码:

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

享受 :)

- Himanshu Jani

---

链接已失效。 - crush

Answer 8

IE9能够正确地处理border-radius和gradients。问题在于，IE9渲染了滤镜属性以及gradient。解决此问题的正确方法是，在使用filter属性的样式声明中禁用filters。

以下示例是如何最好地解决此问题：

您在主样式表中有一个按钮类。

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

在一个IE9条件样式表中：

.btn { filter: none; }

只要在标签中先引用主样式表，再引用IE9的样式表，这个方法就可以完美地解决问题。请注意顺序。

- WFendler

---

IE9无法渲染线性渐变。 - James Westgate

Answer 9

这篇博客帖子对我很有帮助：http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/。基本上，您可以使用条件注释来删除过滤器，并创建渐变的SVG“精灵”，这些精灵可以用作背景图像。简单而优雅！

- user159895

---

我喜欢这个。特别感谢你帮我终于解决了如何使用SVG创建精灵的问题。由于SVG是可缩放的，并且精灵是可能的，我发现SVG精灵包比CSS渐变更加多才多艺，而且像我上面说的那样，在浏览器中很可能会看到100%的支持，远在CSS渐变之前。 - Kevin Peno

哦，我想要补充的是，目前 Webkit 和我相信 Opera 也支持在 CSS 图像 url() 调用中使用 SVG。只剩下一个不支持的了，因此，去掉所有条件语句并为所有支持它的背景提供 SVG。对于其他人，请提供栅格化图像。然后这个 hack 就变得可管理了。 - Kevin Peno

Answer 10

有一种简单的方法可以让它在IE9中只使用一个元素就实现。

看看这个示例：http://jsfiddle.net/bhaBJ/6/ 第一个元素设置了Border-Radius。第二个伪元素设置了背景渐变。

几个关键指令：

• 父级必须有相对或绝对定位
• 父级必须具有overflow: hidden（为了使border-radius效果可见）
• ::before（或::after）伪元素必须具有z-index: -1（有点解决问题的意思）

基本元素声明类似于：

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

伪元素声明：

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}

- Marakoss

---

太完美了！谢谢！ :) - majimekun

我在你的示例中将border-radius设置为20，但在IE9中边框没有被剪切。 - crush

尝试将以下内容添加到您的头部：<meta http-equiv="X-UA-Compatible" content="IE=9" /> - Marakoss