渐变和圆角在IE9中有效，但在IE10中不起作用
[英]Gradient and rounded corners work in IE9, but not IE10
问题描述
Could someone explain to me why this looks just fine in IE9 (as well as Firefox, Chrome, Safari, and Opera), but in IE10 the rounded corners disappear? 
有人可以向我解释为什么这在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>
I've tried deleting, moving, or nesting various elements, but without effect. 我尝试删除，移动或嵌套各种元素，但没有效果。 It seems like if it works in IE9, it shouldn't have a problem with 10. What am I missing? 看来，如果它在IE9中可用，那么10应该没有问题。我缺少什么？
1 个解决方案
解决方案1
1 2013-05-09 22:38:47
The syntax used in your code is correct for both border-radius and gradients for IE10. 您的代码中使用的语法对于IE10的边界半径和渐变都是正确的。 IE includes a compatibility mode that can emulate standards support in older versions of the browser. IE包含一个兼容模式，该模式可以模拟旧版本浏览器中的标准支持。 In this case, it looks like this has been enabled in your copy of IE10. 在这种情况下，您的IE10副本中似乎已启用了此功能。 You can check the compatibility and document mode that IE is using by opening the developer tools (F12) and checking both in the top toolbar. 您可以通过打开开发人员工具（F12）并在顶部工具栏中进行选中，来检查IE使用的兼容性和文档模式。 Switching to IE10 and standards mode should solve the issue. 切换到IE10和标准模式应该可以解决此问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.