IE 9,8,7中的border-radius问题

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

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

Answer 2

Internet Explorer 9中的border-radius不会剪切Internet Explorer中的渐变过滤器。我能想到的唯一解决方案是使用带有渐变的内部<div>元素：

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

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

Salman A提到的唯一其他选项是CSS3 PIE，它解决了这个问题 和 在更早的时候实现border-radius IE的版本。我在几个项目中使用它并且效果很好。

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);