1

有人可以向我解释为什么这在 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 中工作，它应该没有问题 10。我错过了什么？

4

1 回答 1

1

您的代码中使用的语法对于 IE10 的边框半径和渐变都是正确的。IE 包含一个兼容模式，可以模拟旧版本浏览器中的标准支持。在这种情况下，您的 IE10 副本中似乎已启用此功能。您可以通过打开开发人员工具 (F12) 并在顶部工具栏中检查两者来检查 IE 正在使用的兼容性和文档模式。切换到 IE10 和标准模式应该可以解决问题。

于 2013-05-09T22:38:47.037 回答