渐变和圆角在 IE9 中有效，但在 IE10 中无效答案

【问题标题】：Gradient and rounded corners work in IE9, but not IE10渐变和圆角在 IE9 中有效，但在 IE10 中无效
【发布时间】：2023-03-13 00:26:01
【问题描述】：

谁能向我解释一下为什么这在 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的问题。我错过了什么？

【问题讨论】：

您确定您的 IE 版本正确吗？在将border-radius 与filter 渐变组合时，IE9 中有一个非常著名的问题；这不起作用，你不会得到圆角。 IE10没有这个bug，应该没问题。因此，您的代码应该按照 IE9 中的描述被破坏，而不是 IE10。
顺便说一句，你不应该同时需要 SVG 背景渐变和filter 样式；没有它，您已经涵盖了所有基础。您应该可以放弃其中一个（取决于您是否需要支持 IE8）。
在 ie10 兼容视图中为我工作jsfiddle.net/jalbertbowdenii/VUcbX
我没有看到任何这些在 IE10 中不应该工作的东西。能发个demo让我们调试吗？此外，您不需要 IE 的 -ms- 前缀，因为 IE10 直接添加了没有前缀的渐变。 -ms- 前缀仅在平台预览中短暂使用过。
@popvoid 因为您发布的代码在使用 jsfiddle 之类的东西时在 IE10 中运行良好，但在您的设置中，该代码之外的某些内容导致它无法正常工作。如果无法运行您所看到的代码，我们将无法进行调试。我唯一能想到的就是你以某种方式处于兼容模式。你能打开开发工具并确保两种模式都设置为 IE10 吗？

标签： html internet-explorer-9 internet-explorer-10 rounded-corners css

【解决方案1】：

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

【讨论】：

我在 IE 10 中使用它，但它不能正常工作，即使我可以使用说渐变应该在 IE 10 中工作。