时间:2011-01-10 23:40:33

标签: css internet-explorer-9 css3

看到<div>元素正确渲染边框/边框半径,但任何具有背景,边框和边框半径设置的<a><button>都会将背景颜色或图像显示为一个正方形,只有边界是圆的。尝试设置<a>&amp; <button>display: blockdisplay: inline-block,但这不起作用。

是否有已知的解决方法?

以下是Webkit计算样式的链接:https://gist.github.com/773719

alt text

以下是来自IE9开发工具的计算样式: alt text

更新 使用过滤器:;或-ms-filter:; IE中具有渐变的属性使背景突破定义的border-radius。

5 个答案:

答案 0 :(得分:3)

我发现这篇精彩的博客文章展示了如何使用SVG渐变精灵来解决这一特定问题:http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

答案 1 :(得分:3)

解决方案是将渐变嵌套在另一个元素中,边框半径为AND overlflow。 这不太理想,但它的所有css。没有黑客。

除此之外,使用背景图像非常适合ie。

<div class="corner">
   <div class="grad">button</div>
</div>


<style>
.corner,
.grad{
   height:50px;
   width:250px;
   }
.corner{
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
   }
.grad{
   border:1px #659300 solid;
   background: #659300; /* old browsers */
   background: -moz-linear-gradient(top, #659300 0%, #6F9B00 50%, #528200 51%, #6CA501 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#659300), color-stop(50%,#6F9B00), color-stop(51%,#528200), color-stop(100%,#6CA501)); /* webkit */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1cc00', endColorstr='#518e00',GradientType=0 ); /* ie */
   }
</style>

答案 2 :(得分:1)

也跑到这里。基于'过滤器'的渐变实际上不是背景图像,因为它是CSS3渐变,它是一个额外的层。 IE团队显然还没有将这些过滤层剪切到圆角。很奇怪,因为很明显人们会像这样做按钮。

将旧功能映射到新功能必须是痛苦的。他们可以更好地在CSS中实现渐变。我宁愿添加一个前缀而不是添加旧版过滤器。

答案 3 :(得分:0)

对此的一个解决方案是使用CurvyCorners,一个javascript解决方案。它一直可以回到IE6,但是在渐变的背景下挣扎。如果你使用的是块状彩色背景,那么它可以正常工作,并且已处理到目前为止我所有的边框类型。该网站说你需要调用它,但不知怎的,我发现它似乎只是通过在css中包含.js和使用css3 border-radius属性来工作。

答案 4 :(得分:0)

我正在使用Ultimate CSS Gradient Generator。它建议使用此代码在IE9中禁用过滤器:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

这可以解决您的问题。