IE9边框半径不一致答案

【问题标题】：IE9 border-radius inconsistencyIE9边框半径不一致
【发布时间】：2011-07-27 15:50:23
【问题描述】：

有什么想法吗？

我有一个带有边界半径的网站有时在 IE9 中工作，但在其他地方则不行。我还包括...

<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 的模式，或者元素是否将它与渐变或框阴影结合使用。有人有类似的吗？

谢谢

【问题讨论】：

-ms-border-radius 可能工作:)
在 IE9 中简单地使用 border-radius 应该可以正常工作。确保 DOCTYPE 是 HTML5。
@Evan Mulawski Doctype 不影响 css3 属性。
@easwee：它会影响效果的渲染方式。
@Evan Mulawski - 你能举个例子吗？我对此很感兴趣。

标签： css

【解决方案1】：

尝试不使用 DirectX 渐变，它之前会覆盖我的圆角。

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

【讨论】：

+1 对其进行了测试，并在删除过滤器边框半径后按预期工作。还找到了一个很好的解决方法，使用 box-shadow 创建类似的渐变效果：frugalcoder.us/post/2010/09/15/…（查看编辑段落）

【解决方案2】：

将 .nav 类中的内边距更改为 10px，看看它是否仍然存在。

【讨论】：

【解决方案3】：

这绝对是导致问题的线性梯度过滤器。解决这个问题的一个好方法是使用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，然后尝试用过滤器替换线性渐变。

【讨论】：