据说IE9可以通过使用CSS3标准定义的border-radius来处理圆角。
那么边框半径和背景渐变的支持情况如何呢？是的，IE9将分别支持它们两个，但如果你将这两个混合在一起，渐变会溢出圆角。
我还发现阴影在具有圆角的框下面显示为实心黑色线条。
这里是在IE9中显示的图片:
我该如何解决这个问题？
IE9边框半径和背景渐变出现溢出问题
191
- SigmaBetaTooth
6
感谢 @MikeP 和 @meanstreakuk 的建议。我想我正在寻找的答案更多地是关于IE何时真正支持渐变/圆角，或者如何让这两个一起工作。 - SigmaBetaTooth
你已经从@meanstreak那里得到了如何让这两个一起工作的答案。如果你想要更现实一些，SVG渐变作为背景图像比CSS渐变更有可能被所有浏览器完全支持，而CSS渐变仍在积极开发/讨论中。 - Kevin Peno
29难以置信微软如此落后。时已2011年，IE仍在处理这种问题。在他们的网站上，他们说：“快速现在变得美丽”。当然它是。看看上面发布的图片。多么矩形美啊！ - SunnyRed
SunnyRed，嗯，在Chrome中，包含在具有圆角的元素中的内容会溢出到边角。实际上，现在已经是2012年了，浏览器仍然面临这种问题 :-) - Joey
@Joey：这是有意设计的；请参见此问题。 - BoltClock
2@SunnyRed 现在是2013年，这个bug仍然存在 :( - Sliq
17个回答
2
我决定禁用IE9的圆角功能，以解决这个问题。这样做简洁、易于操作，并且通用可用。
{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
- key_
1
在IE9中，mask div是一个好主意。我提供了一些完整的代码来帮助澄清一下。虽然我不喜欢将按钮包装在DIV中，但我认为这比嵌入PNG mask或者使用SVG要容易理解得多。也许IE10会更好地支持它。
<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
-webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
-moz-box-shadow:0px 0px 0px rgb(0,0,0);
-webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
- underdog
1
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */
这个问题困扰了我一段时间，但是当我删除了“filter:”这一行后，问题就解决了。此外，我使用PIE。
出血：
background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);
不会出血：
background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);
快速IE阴影修复：
fixBoxShadowBlur($('*'));
function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
jQueryObject.each(function(){
boxShadow = $(this).css('boxShadow');
if(boxShadow != 'none'){
var bsArr = boxShadow.split(' ');
bsBlur = parseInt(bsArr[2]) || 0;
bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
$(this).css('boxShadow', bsArr.join(' '));
}
});
}
}
- Shawn Rebelo
1
您可以使用shadow来实现渐变效果，并且在Internet Explorer 9中使用border-radius也能正常工作。
就像这样：
box-shadow: inset 0px 0px 26px 5px gainsboro;
- Rajesh
0
对我来说有效...
<!--[if gte IE 9]>
<style type="text/css">
.gradient{
filter: ;
}
</style>
CSS
border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color- stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db', endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);
- user2132041
0
不确定这是一个例外还是有效的解决方法，但是...
我发现只要border-radius大于border-width，就不会出现这个问题。当它们相同时，我会得到方形的角落。
我发现只要border-radius大于border-width，就不会出现这个问题。当它们相同时，我会得到方形的角落。
- daddywoodland
0
使用 Compass 和 Sass，您可以轻松地实现这一点：
@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }
Compass 会为您生成一个 SVG 图像。
就像这样：
#gradiant {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e), color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
}
/* line 28, ../sass/boxshadow.scss */
#border-radius {
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
}
- raam86
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接