html - 边界半径在 ie 中表现异常

标签 html css internet-explorer-9

我刚刚注意到我的工具栏的边框半径在 ie9 中不起作用。奇怪的是有一个 flex 的盒子阴影所以我不知道它发生了什么。在 IE 中,实际的工具栏 div 不是 flex 的,但它的框阴影是 flex 的。在所有其他浏览器中一切都很好,我知道 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>

最佳答案

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

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

关于html - 边界半径在 ie 中表现异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11854017/

相关文章:

html - 为什么 html 电子邮件样板中的行高为 100%

html - 使 section 和 main 的高度与其内容相同(整页)

php - 源码与 "inspect element"的区别

html - CSS .active 和 .hover 延迟?

jquery - 使边框在悬停时淡入/淡出?

html - SVG 变换 :rotate() not working in ie9

html - 目前最好的做法是不使用备用盒子模型吗?

html - IE 9 忽略页面上最后一个元素的底部边距

css - IE 8,9 z-index 错误

html - 单独的按钮 :active from parentDiv:Active