如何修复边框半径结合box-shadow的IE渲染？ [英] How to fix IE rendering of border-radius combined with box-shadow?

问题描述

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

Does anybody have an idea on how to "fix" the rendering in IE 9 and 10 of a combination of box-shadow and border-radius?

当使用插入阴影时显而易见。

It's especially noticeable when using inset shadows. The radius of the shadow is very different in IE compared to webkit/gecko...

在这张图片中，你可以看到问题的阴影的半径是非常不同的IE相比webkit / gecko。在左边是一个带有插入盒子阴影的按钮，在没有盒子阴影的右边。 （不介意不同的字体呈现）

In this image you can see the problem. On the left is a button with an inset box-shadow, on the right without box-shadow. (don't mind the different font-rendering)

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

推荐答案

问题只发生在插入点阴影在IE中触发比border-radius的大小更大的shadow-radius。在您的示例中将border-radius设置为50px，它在IE和Chrome中看起来相同。

The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.

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

If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799

你可能会看到的另一个问题是，IE和Chrome渲染box-shadow的模糊完全不同，但我假设你没有使用它在你的例子中的原因...

Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...

这篇关于如何修复边框半径结合box-shadow的IE渲染？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！