渐变和圆角在IE9中工作,但在IE10中不行



谁能给我解释一下为什么这在IE9(以及Firefox, Chrome, Safari和Opera)中看起来很好,但在IE10中圆角消失了?

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
padding: 0px 20px;
background: #698ac6;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2YjNlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzY5OGFjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YzhlY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #96b3eb 0%, #698ac6 40%, #6c8ecc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96b3eb), color-stop(40%,#698ac6), color-stop(100%,#6c8ecc));
background: -webkit-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: -o-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: -ms-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: linear-gradient(to bottom,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96b3eb', endColorstr='#6c8ecc',GradientType=0 );
width: auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
font-family: Calibri, Verdana, Geneva, sans-serif;
color: #FFFFFF;
height: 44px;
font-size: 16px;
line-height: 36px;
}
</style>
</head>
<body>
<div>
<p>DASHBOARD</p>
</div>
</body>
</html>

我试过删除、移动或嵌套各种元素,但没有效果。如果它能在IE9中工作,那么在ie10中应该不会有问题。我错过了什么?

代码中使用的语法对于IE10的border-radius和gradients都是正确的。IE包含一个兼容模式,可以模拟旧版本浏览器中支持的标准。在这种情况下,它看起来已经在你的IE10副本中启用了。您可以通过打开开发人员工具(F12)并在顶部工具栏中检查IE正在使用的兼容性和文档模式。切换到IE10和标准模式应该可以解决这个问题。

相关内容

最新更新