jquery - 谷歌浏览器在 Windows 上插入框阴影错误，而不是在 Mac 上 : Better workaround?

Question

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

Bug 被跟踪到这里: http://code.google.com/p/chromium/issues/detail?id=25334

所以，问题是，如果你在 Windows 或 Linux 上，并且有人在一个也有 border-radius 的元素上使用 inset box-shadow，你会遇到一个错误——border-radius 被保留，但是inset box-shadow 从里面溢出来，就好像它还是一个方形的盒子。它在 Mac OS X 上的 Chrome 中按预期工作。

使用带纹理背景的人无法使用此 hack，因为它需要不透明的边框颜色。它也只适用于较小的半径。

这个 hack 分为两个部分。一些 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
  }

我现在可以洗澡吗？这个 hack 让我觉得很恶心。

有没有人想出更好的解决方法？

Answer 1

您可以通过 css hack 以 safari 为目标来摆脱 JS 部分，至于带纹理的背景，您可以为边框使用相同的纹理(棘手!但适用于某些纹理):

<style type="text/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; 
} 

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
   #div{
     border: 3px solid #fff; /* cover the edges with the border*/
     margin: 0 -3px 0 -3px; /* and take back the extra pixels the border adds*/
     -webkit-border-image: url(texture.gif) 4 repeat ; /*add the texture to the border*/
   }
}
</style>