有人知道如何在 IE 9 和 10 中“修复”box-shadow 和border-radius 组合的渲染吗？
使用嵌入阴影时尤其明显。 IE中阴影的半径与webkit/gecko相比差别很大...
在这张图片中，您可以看到问题所在。左边是一个带有嵌入框阴影的按钮，右边是没有框阴影的按钮。 （不要介意不同的字体渲染）
这是使用的代码：http://dabblet.com/gist/5450815
【问题讨论】：
标签： internet-explorer css
只有当嵌入阴影的传播触发的“阴影半径”大于 IE 中边框半径的大小时，才会出现此问题。在您的示例中将边框半径设置为 50px，它在 IE 和 Chrome 中看起来相同。
如果您需要更大的 box-shadow 传播，那么您可以只使用边框，至少在您的示例中可以做到这一点。示例：http://dabblet.com/gist/5501799
您可能会看到的另一个问题是 IE 和 Chrome 呈现的 box-shadow 模糊完全不同，但我假设您因此没有在示例中使用它...
【讨论】：
box-sizing: border-box; 可以通过固定按钮的总宽度以某种方式帮助您。
我已经尝试过并且有效的快速（半脏）解决方案是 div 内的 div。如果这样做，请告诉我。
HTML 代码：
</head>
<body>
<div class="box"><div class="box-inside"></div></div>
</body>
</html>
CSS 代码：
.box {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #000;
width: 200px;
height: 100px;
background: #000;
}
.box-inside {
border-radius: 15px;
box-shadow: inset 0 0 0 10px #fff;
width: 175px;
height: 75px;
position: relative;
top: 12%;
left: 6%;
background: #fff;
}
我的jsfiddle
【讨论】：
试试这个，添加这个角色：
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');
【讨论】：
您可以安全地使用inset 框阴影来模拟现代浏览器中的边框，但 IE 会错误地渲染半径。您可以通过让 IE 回退到默认的“初始”样式来解决此问题。
.Button {
color: #0ac;
background-color: #fff;
border-radius: 8px;
box-shadow: inset 0 0 0 2px #0ac;
}
/* IE media query hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.Button {
box-shadow: 0 0 0 2px #0ac;
}
}
【讨论】：
试试这个： //CSS
.box {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
width: 200px;
height: 100px;
}
对于 IE8，您必须包含 CSS3 pie(pie.htc) 文件，然后它才能在 IE8 上运行。
您可以从这里下载：http://css3pie.com/
【讨论】：