谷歌浏览器嵌入在Windows上的盒子阴影错误，而不是在Mac上：更好的解决方法？ [英] Google Chrome inset box-shadow bug on Windows, not on Mac: Better workaround?

问题描述

在这里跟踪错误：
这是目前在Chrome 5.0.375.125上的最新版本，它是本文写作时的最新Windows版本。 http://code.google.com/p/chromium/issues/详细信息？id = 25334

因此，问题是，如果您在Windows或Linux上，并且有人在元素上使用嵌入阴影也有边界半径，你会得到一个错误 - 边界半径被保留下来，但是插入的盒子阴影从中溢出，就好像它仍然是一个方形盒子。它在Mac OS X上的Chrome中按预期工作。

Bug is tracked here: http://code.google.com/p/chromium/issues/detail?id=25334

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

So, the problem is, if you're on Windows or Linux, and someone uses inset box-shadow on an element that also has border-radius, you get a bug -- the border-radius is preserved, but the inset box-shadow spills out of it, as if it were still a square box. It works as expected in Chrome on Mac OS X.

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

people using textured backgrounds can't use this hack, because it requires an opaque border color. It also only really works well on smaller radius.

Two parts to this hack. A little Javascript (jQuery + jQuery.client plugin):

和CSS

And 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 }

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

Can I take a shower now? This hack makes me feel gross.

推荐答案

你可以通过一个CSS黑客攻击来瞄准Safari浏览器，就像纹理背景一样，你可以为边界使用相同的纹理（棘手！但适用于某些纹理）：

解决方案

p>

You can get rid of the JS part by targeting safari via a css hack, as for the textured backgrounds you may use the same texture for the border (tricky! but works for some textures):

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

这篇关于谷歌浏览器嵌入在Windows上的盒子阴影错误，而不是在Mac上：更好的解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！