Google Chrome 在 Windows 上插入框阴影错误，而不是在 Mac 上：更好的解决方法吗？

发布于 2024-09-11 20:49:12 字数 1253 浏览 1 评论 0原文

Chrome 5.0.375.125 上仍然存在这种情况，这是撰写本文时最新的 Windows 版本。

在此跟踪错误： http://code.google.com/p/chromium/issues/ detail?id=25334

所以，问题是，如果你在 Windows 或 Linux 上，并且有人在也有 border-radius 的元素上使用 inset box-shadow，你就会遇到一个 bug —— border-半径被保留，但嵌入的盒子阴影会溢出，就好像它仍然是一个正方形盒子一样。它在 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
  }

我现在可以洗澡吗？这个黑客让我感觉很恶心。

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

原文

This is still current on Chrome 5.0.375.125, which is the latest Windows release at the time of this writing.

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.

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

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

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.

Has anyone come up with a better workaround for this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沙沙粒小 2024-09-18 20:49:12

您可以通过 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>

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>

回复收藏 0 原文

~没有更多了~