13

看到<div>元素正确渲染了边框/边框半径，但是任何设置了背景、边框和边框半径的或将背景颜色或图像显示为正方形，并且只有边框是圆形的<a>。<button>尝试设置<a>&<button>到display: blockor display: inline-block，但没有奏效。

有已知的解决方法吗？

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

替代文字

这是来自 IE9 开发工具的计算样式： 替代文字

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

4

5 回答 5

3

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

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

于 2011-02-21T17:06:24.647 回答
1

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

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

于 2011-02-11T11:35:42.037 回答
0

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

于 2011-05-30T23:43:22.557 回答
0

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

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

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

于 2012-08-28T08:19:34.727 回答