边界半径在 ie 中表现异常答案

【问题标题】：Border radius behaving strangely in ie边界半径在 ie 中表现异常
【发布时间】：2012-08-07 20:56:20
【问题描述】：

我刚刚注意到我的工具栏的边框半径在 ie9 中不起作用。奇怪的是，有一个盒子阴影会弯曲，所以我不知道它发生了什么。在 IE 中，实际的工具栏 div 不是弯曲的，但它的盒子阴影是弯曲的。在所有其他浏览器中一切都很好，我知道 ie9 支持边框半径。

反正css在下面。我已经去掉了所有的前缀和不需要的样式，所以只有盒子阴影和边框半径。这是一个包含所有样式的jsfiddle。

更新

弄清楚出了什么问题。渐变已经停止在 IE 中工作的边界半径形式，所以我现在将在 IE 中禁用它。如果有人有办法保留它们和边界半径，那就太好了。我已经添加了渐变样式。

.membersbar {
             width:98%; background-color:#313131; 
             height:30px; padding-top:5px;
             border-bottom-right-radius:2em;
             position:fixed;
             top:0;  
             box-shadow:0 0 5px 5px #999; 

             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#202020');
             background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#202020));
             background: -moz-linear-gradient(top,  #313131,  #202020);
            }

这是head里的相关信息；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

      <!--[if IE]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

</head>

【问题讨论】：

另一种不能安全地与border-radius 结合使用的样式是overflow:hidden，它在Chrome、Safari 和Opera 中出现故障。
我不知道所以谢谢你

标签： html css internet-explorer-9

【解决方案1】：

让您的 IE 使用最新的 IE 功能。将以下元标记（必须是第一个）添加到您的 HEAD 元素：

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

【讨论】：

我的错。那里不需要（已编辑）。这是 ASP.NET 标记的一部分
那个已经有了，我已经在问题中添加了相关的头部信息

【解决方案2】：

请验证您的主 HTML 文档是否以

开头

<!DOCTYPE HTML>

IE 假设任何没有 DOCTYPE 标记的页面都是“旧的”非 HTML5 文档，并使用一些奇怪的“兼容”模式，忽略了许多 CSS3 特性。

【讨论】：

我可以确认该文档类型已设置并且以下元数据已经存在。我已经在问题中添加了相关的头部信息

【解决方案3】：

我已经弄清楚发生了什么。我拥有的渐变（现在已编辑）阻止了边界半径在 IE 中的工作。我已将渐变添加到 css。如果有人有办法保持渐变和边框半径会很好，否则我将不得不在 IE 中禁用渐变。

【讨论】：