CSS IE9 边框半径和背景渐变出血
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4692686/
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
IE9 border-radius and background gradient bleeding
提问by SigmaBetaTooth
IE9 is apparently able to handle rounded corners by using the CSS3 standard definition of border-radius.
IE9 显然能够通过使用 .css 的 CSS3 标准定义来处理圆角border-radius。
What about support for border radius andbackground gradient? Yes IE9 is to support them both separately, but if you mix the two the gradient bleeds out of the rounded corner.
对边界半径和背景渐变的支持怎么样？是的 IE9 是分别支持它们，但是如果将两者混合，则渐变会从圆角溢出。
I am also seeing strangeness with shadows showing as a solid black line under a box with rounded corners.
我也看到奇怪的阴影在圆角框下显示为黑色实线。
Here are the images shown in IE9:
以下是 IE9 中显示的图像：
How can I work around this problem?
我该如何解决这个问题？
采纳答案by Steve Eisner
Here's one solution that adds a background gradient, using a data URI to create a semi-transparent image that overlays any background color. I've verified that it's clipped correctly to the border radius in IE9. This is lighter weight than SVG-based proposals but as a downside, is not resolution-independent. Another advantage: works with your current HTML/CSS and does not require wrapping with additional elements.
这是一种添加背景渐变的解决方案，使用数据 URI 创建覆盖任何背景颜色的半透明图像。我已经验证它在 IE9 中被正确地裁剪到边框半径。这比基于 SVG 的提议更轻，但作为一个缺点，它与分辨率无关。另一个优点：适用于您当前的 HTML/CSS，不需要用其他元素包装。
I grabbed a random 20x20 gradient PNG via a web search, and converted it into a data URI using an online tool. The resulting data URI is smaller than the CSS code for all that SVG mess, much less the SVG itself! (You could apply this conditionally to IE9 only using conditional styles, browser-specific css classes, etc.) Of course, generating a PNG works great for button-sized gradients, but not page-sized gradients!
我通过网络搜索随机获取了一个 20x20 渐变 PNG，并使用在线工具将其转换为数据 URI。生成的数据 URI 比所有 SVG 混乱的 CSS 代码都小，更不用说 SVG 本身了！（您可以仅使用条件样式、特定于浏览器的 css 类等有条件地将其应用于 IE9。）当然，生成 PNG 非常适合按钮大小的渐变，但不适用于页面大小的渐变！
HTML:
HTML：
<span class="button">This is a button</span>
CSS:
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;
}
回答by user740128
I have also been working with this problem. Another "solution" is to add a div around the item that has the gradient and rounded corners. Make that div the same height, width, and rounded corner values. Set the overflow to hidden. This is basically just a mask, but it works for me.
我也一直在处理这个问题。另一个“解决方案”是在具有渐变和圆角的项目周围添加一个 div。使该 div 具有相同的高度、宽度和圆角值。将溢出设置为隐藏。这基本上只是一个面具，但它对我有用。
HTML:
HTML：
<div class="mask roundedCorners">
<div class="roundedCorners gradient">
Content
</div>
</div>
CSS:
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 */
}
回答by Jan Beck
I think it's worth mentioning that in many cases you can use an inset box-shadow to "fake" the gradient effect and avoid the ugly edges in IE9. This works especially well with buttons.
我认为值得一提的是，在很多情况下，您可以使用 inset box-shadow 来“伪造”渐变效果并避免 IE9 中的丑陋边缘。这对按钮特别有效。
See this example: http://jsfiddle.net/jancbeck/CJPPW/31/
请参阅此示例：http: //jsfiddle.net/jancbeck/CJPPW/31/
回答by Louis L.
You can also use CSS3 PIE to resolve this issue:
您也可以使用 CSS3 PIE 来解决此问题：
Of course, that might be overkill if you're just depending on a single element with rounded corners and a background gradient, but it is an option to consider if you're incorporating a number of common CSS3 features on your pages and want easy support for IE6+
当然，如果您只依赖具有圆角和背景渐变的单个元素，这可能有点过头了，但是如果您在页面上合并了许多常见的 CSS3 功能并希望获得简单的支持，那么这可能是一种选择IE6+
回答by MikeP
I ran into this bug too. My suggestion would be to use a repeated background image for the gradient in ie9. IE9 correctly tiles the image behind the rounded borders (as of RC1).
我也遇到了这个bug。我的建议是在 ie9 中为渐变使用重复的背景图像。IE9 正确地将图像平铺在圆形边框后面（从 RC1 开始）。
I fail to see how writing 100 lines of code to replace 1 line of CSS is simple or elegant. SVG is cool and all, but why go through all that when easier solutions for gradient backgrounds have been around for years.
我看不出编写 100 行代码来替换 1 行 CSS 是多么简单或优雅。SVG 很酷，但为什么要在渐变背景的更简单解决方案已经存在多年的情况下进行所有这些。
回答by Himanshu Jani
I also got stuck in the same problem n found that IE can't render the border radius and gradient both at a time, it both conflicts, the only way to solve this headache is to remove the filter and use the gradient via svg code, just for IE ..
我也遇到了同样的问题 n 发现 IE 无法同时渲染边框半径和渐变，两者冲突，解决这个头痛的唯一方法是删除过滤器并通过 svg 代码使用渐变，只为 IE ..
you can get the svg code by using their gradient color code, from Microsoft this site (specially made for gradient to svg):
你可以通过使用他们的渐变颜色代码来获得 svg 代码，来自微软这个网站（专为渐变到 svg）：
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
enjoy :)
请享用 ：）
回答by Brian Lewis
Just use a wrapper div (rounded & overflow hidden) to clip the radius for IE9. Simple, works cross-browser. SVG, JS, and conditional comments are unnecessary.
只需使用包装 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 */
}
回答by WFendler
IE9 handles border-radius and gradients together properly. The problem is that IE9 renders the filter proper in addition tothe gradient. The way to properly solve this is to disable filters on the style declarations that utilize the filter property.
IE9 正确处理边界半径和渐变。问题是 IE9除了渐变之外还正确渲染了过滤器。正确解决此问题的方法是在使用 filter 属性的样式声明上禁用过滤器。
As an example on how to best solve this:
作为一个如何最好地解决这个问题的例子：
You have a button class in your main stylesheet.
您的主样式表中有一个按钮类。
.btn {
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
In a conditional IE9 stylesheet:
在条件 IE9 样式表中：
.btn { filter: none; }
As long as the IE9 stylesheet is referenced in your head afteryour main stylesheet this will work perfectly.
只要在您的主样式表之后在您的头脑中引用 IE9 样式表，这将完美地工作。
回答by Dan Herd
This blog posting helped me: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
这篇博文对我有帮助：http: //abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
Basically, you use a conditional comment to remove the filter and then create SVG 'sprites' of gradients which you can use as background images.
基本上，您使用条件注释删除过滤器，然后创建渐变的 SVG“精灵”，您可以将其用作背景图像。
Simple and elegant!
简单而优雅！
回答by Marakoss
There is a simple way to make it work under IE9 with just ONE element.
有一种简单的方法可以让它在 IE9 下工作，只需一个元素。
Take a look at this fiddle: http://jsfiddle.net/bhaBJ/6/
看看这个小提琴：http: //jsfiddle.net/bhaBJ/6/
First element sets the Border-Radius. Second pseudo-Element sets the Background Gradient.
第一个元素设置边界半径。第二个伪元素设置背景渐变。
Few key instructions:
几个关键指令：
- parent must have relativeor absolute position
- parent must have overflow: hidden; (in order to border-radius effect to be visible)
- ::before (or ::after) pseudo-element must have z-index: -1(workaround kind of)
- 父级必须具有相对或绝对位置
- 父级必须有溢出：隐藏；（为了让border-radius效果可见）
- ::before (或 ::after) 伪元素必须有z-index: -1（变通方法）
Base element declaration goes something like:
基本元素声明类似于：
.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*/
}
Pseudo-Element declaration:
伪元素声明：
.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 );
}
