IE9边界半径和背景渐变出血
Sig*_*oth 191 gradient css3 internet-explorer-9 compass-sass
IE9显然能够通过使用CSS3标准定义来处理圆角border-radius.
支持边界半径和背景渐变怎么样？是的IE9是单独支持它们,但如果你混合这两个渐变从圆角出来.
我也看到了奇怪的阴影,在圆角的盒子下面显示为一条黑色的实线.
以下是IE9中显示的图像:
我该如何解决这个问题？
小智 104
我也一直在处理这个问题.另一个"解决方案"是在具有渐变和圆角的项目周围添加div.使该div具有相同的高度,宽度和圆角值.将溢出设置为隐藏.这基本上只是一个面具,但它适用于我.
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 */
}
- 这对我来说非常有效,并且比其他提出的解决方案简单得多. (3认同)
- 只是一个小注,但你的边界半径语句应该颠倒以促进向前兼容性.我做了编辑. (2认同)
Ste*_*ner 49
这是一个添加背景渐变的解决方案,使用数据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;
}
- 他的手动数据URI是某些CSS预处理器在部署期间通常执行的操作.截至"但这是一种什么样的丑陋黑客",这是一个重要的废话.SVG是任何其他图像,尽管是矢量图像.因此,将SVG称为hack,并提出PNG是绝对无意义的.为什么SVG更好？分辨率独立,与使用border-radius而不是栅格化图像背景的原因相同. (4认同)
- 不太清楚为什么你使用数据uri而不仅仅是图像？我想一个图像意味着对ie9用户额外调用服务器,但是将所有那些额外的字符发送到非ie9浏览器似乎是浪费.解决方案对我来说是一个图像,会喜欢这个解释. (2认同)
Jan*_*eck 44
我认为值得一提的是,在许多情况下,您可以使用插入框阴影来"伪造"渐变效果并避免IE9中的丑陋边缘.这对按钮特别有效.
看这个例子:http://jsfiddle.net/jancbeck/CJPPW/31/
- 在我的情况下很好的修复,因为我只在一个按钮上使用它,并且需要一个像你画的渐变.我现在使用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);` (2认同)
小智 8
您还可以使用CSS3 PIE来解决此问题:
当然,如果您只是依赖于带有圆角和背景渐变的单个元素,那么这可能会有点过分,但如果您在页面上添加了许多常见的CSS3功能并希望轻松支持,则可以选择考虑对于IE6 +
小智 7
我也碰到了这个bug.我的建议是在ie9中使用重复的背景图像作为渐变.IE9正确地将图像平铺在圆形边框后面(从RC1开始).
我没有看到如何编写100行代码来替换1行CSS简单或优雅.SVG很酷,但是为什么当渐变背景的简单解决方案已经存在多年时,为什么要经历这一切.
小智 5
我也陷入了同样的问题n发现IE无法一次渲染边框半径和渐变,这两者都有冲突,解决这个问题的唯一方法就是删除过滤器并通过svg代码使用渐变,仅适用于IE ..
你可以使用他们的渐变颜色代码来获取svg代码,来自Microsoft这个站点(专门用于渐变到svg):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
请享用 :)
小智 5
只需使用包装器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 */
}