IE9边框半径不一致性

Question

有什么想法吗？

我的网站在IE9中有时可以使用border-radius，但有时不能。我还包含了...

<meta http-equiv="X-UA-Compatible" content="IE=9" />

在头部中添加这段代码似乎不会有任何影响，无论是否存在。它可以用于页面的各个部分，例如下面...

#nav a {
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
/* text-shadow: 0 1px 1px rgba(0, 0, 0, .3); */
font-size: 18px;
background-color:rgba(72,124,158,0);
    -webkit-transition:All 0.5s ease;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;

但在下面的示例中不是这样。

nav {
margin: 0;
padding: 0;
line-height: 100%;
-webkit-border-top-left-radius: 2em;
-moz-border-radius-topleft: 2em;
border-top-left-radius: 2em;
-webkit-border-bottom-left-radius: 2em;
-moz-border-radius-bottomleft: 2em;
border-bottom-left-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #007bb6; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677',   endColorstr='#007bb6'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#004677), to(#007bb6)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #004677,  #007bb6); /* for firefox 3.6+ */
background: -o-linear-gradient(top,  #004677,  #007bb6); /* for Opera */
background: linear-gradient(top,  #004677,  #007bb6); 
/* border: solid 1px #6d6d6d; */    
height: 38px;
display: block;
float: right;
width: 750px;
margin-top: 15px;
}

我也无法看出使用像素(px)或弹性单位(em)是否会影响其工作，或者元素是否与渐变或盒子阴影一起使用。有人遇到过类似的问题吗？

谢谢

- Adam O'grady-Marshall

---

-ms-border-radius 可能有效 :) - Saeed Neamati

在IE9中，简单地使用border-radius应该可以正常工作。确保DOCTYPE为HTML5。 - Evan Mulawski

@Evan Mulawski Doctype 不会影响 CSS3 属性。 - easwee

@easwee：它影响特效的呈现方式。 - Evan Mulawski

@easwee：http://www.w3.org/wiki/Choosing_the_right_doctype_for_your_HTML_documents - Evan Mulawski

Answer 1

尝试不使用DirectX渐变效果，否则会覆盖我的圆角。

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#004677',   endColorstr='#007bb6'); /* for IE */

- MikeM

---

测试过了，去掉过滤器后border-radius按预期工作。还发现一个不错的解决方法，使用box-shadow来创建类似的渐变效果：http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx（查看编辑段落）。 - easwee

Answer 2

将您的 .nav 类中的填充更改为 10px，然后查看是否仍然发生此问题。

- Chains

Answer 3

肯定是linear-gradient过滤器引起了问题。一个好的解决方法是使用Modernizr进行特性检测，然后通过类提供不同的规则。

.cssgradients {
..use the linear-gradient rules
}
.no-cssgradients {
.. another rule, not using the ie filter
}

在.no-cssgradients声明中，您可以提供一个背景图片，或者更酷的是，使用data-uri来减少http请求。

background-image: url(data:image/png;base64,iVBORw0KGgoA....);

你可以使用在线工具（例如this one）翻译你的背景图片。

我曾经使用这种技术成功地将线性渐变和圆角组合到旧版IE浏览器中，并加入CSS3 PIE，以避免CSS3 PIE尝试用过滤器替换线性渐变。

- christianhanvey