IE9 中 <a> 的边框半径错误答案

【问题标题】：Border-radius bug on <a> in IE9IE9 中 <a> 的边框半径错误
【发布时间】：2011-06-06 20:54:12
【问题描述】：

看到<div> 元素正确渲染了border/border-radius，但是任何设置了背景、border 和border-radius 的<a> 或<button> 将背景颜色或图像显示为正方形，并且只有边框是圆形的。尝试将 <a> 和 <button> 设置为 display: block 或 display: inline-block 但这不起作用。

有已知的解决方法吗？

这里是来自 Webkit 的计算样式的链接：https://gist.github.com/773719

这是来自 IE9 开发工具的计算样式：

更新使用过滤器：；或 -ms-filter:;在 IE 中具有渐变的属性使背景超出定义的边框半径。

【问题讨论】：

这仅在 IE9 中吗？如果没有，你能发布一些 CSS 吗？
当然只有IE9。 IE8 不支持border-radius。
是的，只有 IE9。 Webkit/Firefox 工作正常。将使用 CSS 更新帖子。
IE9 是测试版产品。这意味着产品中仍然可能存在可能对代码呈现方式产生负面影响的错误。
不明白IE9团队为什么没有去掉filter:progid...gradient，换成background:gradient(linear, 0% 0%, 0% 100%, from (#4b90e5), to(#0e4b94));...普通的 CSS...从一开始就应该是这样的

标签： internet-explorer-9 css

【解决方案1】：

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

【讨论】：

【解决方案2】：

解决方案是将渐变嵌套在另一个具有边界半径和溢出的元素内。这不太理想，但它都是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>

【讨论】：

【解决方案3】：

也遇到了这个问题。基于“过滤器”的渐变实际上不是背景图像，因为它与 CSS3 渐变一样，它是一个额外的层。 IE 团队显然还没有将这些过滤层裁剪到圆角。很奇怪，因为很明显人们会制作这样的按钮。

将旧功能映射到新功能一定很痛苦。对他们来说，只在 CSS 中实现渐变可能会更好。我宁愿添加前缀而不是添加旧过滤器。

【讨论】：

【解决方案4】：

对此的一种解决方案是使用CurvyCorners，这是一种javascript 解决方案。它可以一直使用到 IE6，但在渐变背景下会遇到困难。但是，如果您使用的是块色背景，它将可以正常工作，并且已经处理了我迄今为止所使用的所有边框类型。该网站说您需要调用它，但不知何故，我发现它似乎只需包含 .js 并在 css 中使用 css3 边界半径属性即可。

【讨论】：

另外，抱歉，我想回复@Nasir 所说的内容，但还不能 - 但是，IE 团队表示他们还不支持 css3 功能的原因是 css3 规范尚未最终确定然而。它相当薄弱，但在他们开始“实验”技术之前，他们基本上是在“追赶”并正确实施 css2。在 css3 成为标准之前，我们会很沮丧地问“他们为什么不......？”

【解决方案5】：

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

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

这应该可以解决您的问题。

【讨论】：