6

これは、この記事の執筆時点で最新のWindowsリリースであるChrome5.0.375.125でも最新です。

バグはここで追跡されます： http ：//code.google.com/p/chromium/issues/detail？id = 25334

したがって、問題は、WindowsまたはLinuxを使用していて、誰かがボーダー半径を持つ要素にインセットボックスシャドウを使用している場合、バグが発生することです。ボーダー半径は保持されますが、インセットボックスは保持されます。それがまだ四角い箱であるかのように、影がそこからこぼれます。MacOSXのChromeで期待どおりに動作します。

テクスチャ背景を使用している人は、不透明な境界線の色が必要なため、このハックを使用できません。また、実際には小さい半径でのみうまく機能します。

このハックの2つの部分。小さな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
  }

今シャワーを浴びてもいいですか？このハックは私をひどく感じさせます。

誰かがこれのためのより良い回避策を思いついたことがありますか？

4

1 に答える 1

2

css ハックを介してサファリをターゲットにすることで、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>
于 2010-11-04T18:16:58.947 に答える