Html 渐变和圆角适用于IE9，但不适用于IE10_Html_Internet Explorer 9_Internet Explorer 10_Rounded Corners_Css

Html 渐变和圆角适用于IE9，但不适用于IE10

html css

Html 渐变和圆角适用于IE9，但不适用于IE10,html,internet-explorer-9,internet-explorer-10,rounded-corners,css,Html,Internet Explorer 9,Internet Explorer 10,Rounded Corners,Css,有人能解释一下为什么在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/Pgo8c

有人能解释一下为什么在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>


div
{
填充：0px 20px；
背景#698ac6；
背景：url（数据：数据：数据：图像/svg+xml；基本64，基本64，PD94BBWWWWWWBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWBBWWWWWBWWWWWWWWBWWWWWWWWWWWWWWVVVVVVVVvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.中国政府的一个研究（3）2）2）2）2）2 2 2）2 2 2 2 2 2 2（2）2 2 2（2）2 2 2）2 2 2 2（2）vvvc1 vvvc1 vvvvvc4 4 4 4）2）vvvc1 vvvc1 vvc1 vc1 vc1 vc1 vvc1 vc1 vc1 vc1 vc1 vc1 vvvvc1 vc1 vvvc1 vc1 vc1 vc1 vvvc1 vvvc1 vvvvvvvc1 vc1 vc1 vc1 vvc1 vc1 vvvvvvvc1 vc1 vc1 vvc1 vc1 vvc1 vc1 vvvc1 vc1 vvvvvvvvc1 vvvvvvc1 vvvvvvvvvvvvvBD0IDXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+；
背景：-莫兹线性梯度（顶部，#96b3eb 0%，#698ac6 40%，#6c8ecc 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#96b3eb）、颜色停止（40%，#698ac6）、颜色停止（100%，#6c8ecc））；
背景：-webkit线性梯度（顶部，#96b3eb 0%，#698ac6 40%，#6c8ecc 100%）；
背景：-o-线性梯度（顶部，#96b3eb 0%，#698ac6 40%，#6c8ecc 100%）；
背景：-ms线性梯度（顶部，#96b3eb 0%，#698ac6 40%，#6c8ecc 100%）；
背景：线性梯度（至底部，#96b3eb 0%，#698ac6 40%，#6c8ecc 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#96b3eb'，endColorstr='#6c8ecc'，GradientType=0）；
宽度：自动；
边框左上半径：15px；
边框右上角半径：15px；
-左上角moz边界半径：15px；
-moz边界半径右上角：15px；
-webkit边框左上半径：15px；
-webkit边框右上角半径：15px；
边框右上角半径：15px；
边框左上半径：15px；
字体系列：Calibri，Verdana，日内瓦，无衬线；
颜色：#FFFFFF；
高度：44px；
字体大小：16px；
线高：36px；
}
仪表板

我尝试过删除、移动或嵌套各种元素，但没有效果。似乎如果它在IE9中工作，它应该不会与10有问题。我缺少什么？

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

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

你确定你的IE版本是正确的吗？IE9中有一个非常著名的问题，当将

边界半径

与

过滤器

渐变相结合时；这不起作用，也不会得到圆角。IE10会没有这个bug，应该没问题。因此，您的代码应该按照IE9而不是IE10中的描述进行分解。顺便说一句，您不应该同时需要SVG背景渐变和

filter

样式；您已经涵盖了没有它的所有基础。您应该能够删除其中一个（取决于您是否需要支持IE8）。在ie10 compat视图中对我有效。我看不到任何这些在ie10中不起作用的东西。你能发布一个演示以便我们进行调试吗？另外，你不需要IE的-ms-前缀，因为ie10直接添加了没有前缀的渐变。-ms-前缀仅在平台预览中短暂使用。@popvoid作为你发布的代码，在ie10中使用时效果很好像JSFIDLE一样，你的设置中有一些代码之外的东西导致它无法工作。如果我们不能按照你看到的那样运行代码，我们就不可能进行调试。我唯一能想到的是你处于兼容模式。你能打开开发工具并确保它设置为IE10 f吗或者两种模式都有？你确定你的IE版本是正确的吗？在IE9中将

边界半径

与

过滤器

渐变相结合时，存在一个众所周知的问题；这不起作用，你也不会得到圆角。IE10没有这个错误，应该可以。因此，你的代码应该按照我之前描述的那样被破坏n IE9，而不是IE10。顺便说一句，您不应该同时需要SVG背景渐变和

过滤器样式；您已经涵盖了没有它的所有基础。您应该能够删除其中一个或另一个（取决于您是否需要支持IE8）。在ie10 compat视图中对我有效。我看不到任何这些在ie10中不起作用的东西。你能发布一个演示以便我们进行调试吗？另外，你不需要IE的-ms-前缀，因为ie10直接添加了没有前缀的渐变。-ms-前缀仅在平台预览中短暂使用。@popvoid作为你发布的代码，在ie10中使用时效果很好像JSFIDLE一样，你的设置中有一些代码之外的东西导致它无法工作。如果我们不能按照你看到的那样运行代码，我们就不可能进行调试。我唯一能想到的是你处于兼容模式。你能打开开发工具并确保它设置为IE10 f吗或者两种模式？我在IE 10中使用了它，但它不能正常工作，即使我可以使用它，我说渐变应该在IE 10中工作。我在IE 10中使用了它，但它甚至不能正常工作