IE 9、8、7 中的边框半径问题

Question

我已附上我在网站上使用的菜单的图片，除了 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 相同的行为

Answer 1

Internet Explorer 中的渐变过滤器不会被 Internet Explorer 9 中的 border-radius 剪切。我能想到的唯一解决方案是使用内部

应用了渐变的元素：

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

将 border-radius 应用于

元素，并将渐变应用于

< /代码>。这应该给出正确的结果。

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

Answer 2

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

Answer 3

尝试

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

举一个简单的例子

Answer 4

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

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