IE 9、8、7 中的边界半径问题答案

【问题标题】：border-radius issues in IE 9, 8 , 7IE 9、8、7 中的边界半径问题
【发布时间】：2025-12-29 07:55:16
【问题描述】：

我已经附上了我用于我的网站的菜单的图片，除了 IE，所有其他浏览器都呈现正确的输出：

即使在 IE9 中，悬停效果也应该是弯曲的，但它会产生矩形效果。

Firefox 、 safari 和 chrome 工作正常：

CSS

header nav {
padding:7px 0 10px 0;
}
header nav ul {
float:right;
padding:2px 0 0 0;
}
header nav ul li {
  float:left;
  padding-left:4px;
  }
  header nav ul li a {
    position:relative;
    float:left;
    font-size:14px;
    color:#fff;
    text-decoration:none;
    font-family: 'ColaborateThinRegular';
    text-transform:uppercase;
    height:32px;
    line-height:32px;
    background-color:#181717;
    padding:0 36px 0 10px;
    border-radius:17px;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    }
  header nav ul li a:hover,
  header nav ul li a.current {
    background-image: -moz-linear-gradient(top, #E53088, #E530C1); /* FF3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E53088),color-stop(1, #E530C1)); /* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E53088', endColorstr='#E530C1')"; /* IE8 */
border-radius:17px;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;

    }

我正在寻找与 firefox、chrome 和 safari 相同的行为

【问题讨论】：

border-radius 是 css3 功能，而 IE6/7/8 是前 css3 时代的浏览器。
对不起，我忘记添加我正在使用的 css，我刚刚上传了它

标签： internet-explorer css

【解决方案1】：

Internet Explorer 中的渐变过滤器不会被 Internet Explorer 9 中的 border-radius 截断。我能想到的唯一解决方案是使用一个内部 <div> 元素并应用渐变：

<nav>
  <ul>
    <li>
      <div class="gradient">Home</div>
    </li>
  </ul>
</nav>

将border-radius 应用于<li> 元素并将渐变应用于<div class="gradient">。这应该会给出正确的结果。

正如 Salman A 所提到的，唯一的其他选项是 CSS3 PIE，它可以为您解决此问题在旧版本的 IE 中实现 border-radius。我在几个项目中使用它，效果很好。

【讨论】：

这是 IE 中的一个错误吗，我们是否总是不得不使用 hack 来解决 IE 问题，为什么它们不像 chrome 那样简单..
嗯，听起来可能是 IE9 的错误。其他浏览器过去曾遇到过这种与边框半径有关的问题（例如，Firefox 3.0 没有使用边框半径裁剪 <img> 标记的角），所以如果这是一个 IE 错误，那么 IE 会令人沮丧没有从别人的错误中吸取教训。
@Spudley：我相信这只是因为过滤器已经过时了。它们似乎没有随着每个版本的 IE 更新，这也可以解释为什么 alpha 问题从未用其他过滤器修复。过滤器只查看元素的尺寸并重新绘制一个矩形来代替元素（类似于二元行为的工作方式）。如果过滤器在 IE 11 中被弃用甚至失效，我不会感到惊讶。
@AndyE - 这也是我的第一个想法，但问题出在 IE9 中，并且 IE9 不使用 filter 样式。
@Spudley：你说得对，根据文档它们已被弃用:-) 但是，IE 9 中的渐变仍然需要-ms-filter，因为它本身不支持linear-gradient。 IE 10 可以。

【解决方案2】：

看看CSS3 PIE 项目。它将在 IE 6 到 9 中提供各种 CSS3 功能；包括圆角。

【讨论】：

对不起，我忘记添加我正在使用的 css，我刚刚上传了它
我刚刚查看了您的 CSS，我确信 CSS3 PIE 将使 linear-gradient 和 border-radius 属性在旧版本的 IE 中工作。在 IE 中打开项目主页上的演示，看看它是否给你预期的结果。
+1 CSS3Pie 非常适合这类事情，可以解决您的 IE7/8 问题。（不确定您遇到的 IE9 问题；这完全是一个单独的问题）

【解决方案3】：

试试

.class {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

只是一个简单的例子

【讨论】：

对不起，我忘记添加我正在使用的 css，我刚刚上传了它

【解决方案4】：

Twitter Bootstrap 执行以下操作来解决此问题：

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

【讨论】：