Question

是否有人知道如何在IE 9和10中组合盒阴影和边框半径来“修复”渲染？

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

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

enter image description here

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

Answer 1

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

HTML CODE：

</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

Answer 2

问题仅发生在插入阴影的扩散触发比IE中的border-radius大小更大的“阴影半径”时。在您的示例中将border-radius设置为50px，在IE和Chrome中看起来相同。

如果你需要更大的盒子阴影扩散，那么你可以使用边框，至少在你的例子中可以做到这一点。示例：http://dabblet.com/gist/5501799

你可能会看到的另一个问题是IE和Chrome渲染了盒子阴影的模糊完全不同，但我认为你没有在你的例子中使用它...

Answer 3

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

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='1');

Answer 4

您可以安全地使用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;
  }
}

Answer 5

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

如何修复border-radius与box-shadow结合的IE渲染？

5 个答案: