9

有没有人知道如何在 IE 9 和 10 中“修复”box-shadow 和border-radius 组合的渲染？

使用嵌入阴影时尤其明显。与 webkit/gecko 相比，IE 中阴影的半径有很大不同...

在这张图片中，您可以看到问题所在。左边是一个带有嵌入框阴影的按钮，右边是没有框阴影的按钮。（不要介意不同的字体渲染）

在此处输入图像描述

这是使用的代码： http: //dabblet.com/gist/5450815

4

5 回答 5

3

仅当嵌入阴影的扩展触发比 IE 中边框半径的大小更大的“阴影半径”时，才会出现此问题。在您的示例中将边框半径设置为 50px，它在 IE 和 Chrome 中看起来相同。

如果您需要更大的 box-shadow 传播，那么您可以只使用边框，至少在您的示例中可以解决问题。示例：http ://dabblet.com/gist/5501799

您可能会看到的另一个问题是 IE 和 Chrome 呈现的 box-shadow 模糊完全不同，但我假设您因此没有在示例中使用它...

于 2013-05-02T12:10:01.183 回答
3

我尝试过并且有效的快速（半脏）解决方案是 div 内的 div。如果这样做，请告诉我。

HTML 代码：

</head>
<body>
 <div class="box"><div class="box-inside"></div></div>
 </body>
</html>

代码：

.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

于 2013-04-29T18:56:06.173 回答
2

试试这个，添加这个角色：

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');
于 2013-05-02T20:46:10.863 回答
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;
  }
}
于 2017-12-05T01:20:34.907 回答
-4

试试这个：//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/

于 2013-04-24T10:29:06.673 回答