internet-explorer-9 - IE border-radius - 特定部分仍然是正方形，尽管(看似)有效的 CSS 规则

Question

我在使用一个 div(我网站的标题)时遇到问题，它具有以下规则:

div#header {
width:100%;
background-color:#660066;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#330033', endColorstr='#990099',GradientType=0 );
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}

然而在 IE9 中，左上角和右上角没有圆 Angular 。在 Chrome、Safari 和 Firefox 中是。

See it here (标题 div 包含 Logo 和“CRGS 共享 学生文件共享系统"title)

你知道可能是什么原因吗？这可能只是我是一个菜鸟。

Full stylesheet here (它有点困惑，因为它正在进行中)。

提前干杯。

Answer 1

这是 IE 9 中的一个错误。它支持圆形边框和渐变，但不能同时支持它们。这意味着如果你想要渐变，IE 9 会显示但会忽略圆 Angular 。或者，您可以做的是创建一个渐变图像并将其用于不理解渐变的浏览器。示例:

div#header {
width:100%;
border:0px;
background-color:#660066;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330033), to(#990099), color-stop(.5,#660066));
background-image: -moz-linear-gradient(top, #330033 0%, #660066 50%, #990099 100%);
background-image: url('your gradient image.png') 0 0 repeat;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius:15px 15px 0px 0px;
-moz-box-shadow: 3px 0px 3px #888;
-webkit-box-shadow: 3px 0px 3x #888;
box-shadow: 3px 0px 3px #888;
}