谷歌Chrome嵌入了Windows上的盒子阴影错误，而不是Mac：更好的解决方法？

这仍然是Chrome 5.0.375.125的最新版本，这是撰写本文时的最新Windows版本。

此处会跟踪错误： http ： //code.google.com/p/chromium/issues/detail？id = 25334

所以，问题是，如果您使用的是Windows或Linux，并且某人在也具有border-radius的元素上使用了插入框阴影，则会出现错误 – 边框半径被保留，但插入框 – 阴影溢出来，好像它仍然是一个方形盒子。 它在Mac OS X上的Chrome中按预期工作。

使用纹理背景的人不能使用这种黑客，因为它需要不透明的边框颜色。 它也只适用于较小的半径。

这个黑客的两个部分。 一个小Javascript（jQuery + jQuery.client插件）：

if ($.client.browser == "Chrome" && $.client.os != "Mac"){ $('html').addClass("inset-radius-hack"); }; 

和CSS

 #div{ -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; padding: 5px 10px; margin-bottom: 10px; max-width: 120px; } html.inset-radius-hack #div { border: 2px solid #fff; /* cover the edges with the border margin: 0 -2px 0 -2px; /* and take back the extra pixels the border adds } 

我现在可以洗个澡吗？ 这个黑客让我觉得很糟糕。

有没有人为此提出更好的解决方法？

Answer 1

您可以通过css hack定位safari来摆脱JS部分，对于纹理背景，您可以使用相同的边框纹理（棘手！但适用于某些纹理）：