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中，左上角和右上角并非四舍五入。在Chrome，Safari和Firefox中，它们都是。

See it here（标题div包含徽标和“CRGS Share” 学生档案共享系统“标题”

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

Full stylesheet here（这很麻烦，因为它正在进行中）。

提前干杯。

Answer 1

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

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;
}

Answer 2

渐变将在IE9中出现圆角，所以现在最好的解决方案是添加一个额外的div：

 <div class="corners"><div class="gradient"></div></div>

并为.corners隐藏溢出

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

我建议使用类似Photoshop的工具来创建跨浏览器渐变：http://www.colorzilla.com/gradient-editor/

这个创建border-radius： http://border-radius.com/

IE border-radius - 特定部分仍然是正方形，尽管（看似）有效的CSS规则

2 个答案: