Chrome、Opera、SafariのCSS3ボーダー半径の問題

Question

丸めたコーナーをいくつかのdivに追加しようとしたときにこの問題が発生し、解決策が見つからないようです。私はdiv要素に割り当てられたクラスのために、このCSSを使用しています：

-moz-box-shadow: 0px 5px 5px #cccccc; 
-webkit-box-shadow: 0px 5px 5px #cccccc; 
box-shadow: 0px 5px 5px #cccccc; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 

次は、それはクロム、Safariやオペラに表示する方法である：

そして、ここではそれがどのように表示するかですFirefoxとIE9で：

これは、Chromeの背景かのように見え、他の人が何らかの形でBACの上にクリップ上の境界にあるkgroundの色。色付きの上端に関連付けられた唯一のCSSは：

border-top:8px solid #333333; 

アイデアをお持ちですか？

Answer 1

チェックこのフィドルを：

http://jsfiddle.net/QVS9X/

あなたがborder-radiusを削除し、すべてが正常に戻って行きます。 border-radiusのWebkitとOperaの実装のバグを発見したかもしれません。それが報告されていないかどうかをチェックし、報告されていない場合は報告することができます:)。

[EDIT]

私は、これはバグではかなり確信しています。

1. それだけクロム&オペラ
2. バグがChromeとオペラ
バギー部分のみ境界半径の値を超えたボーダーの幅に関係している
3. に異なって見えるで現れる（すなわち、border-radius：10px、border width 10pxの場合）
4. 正しくレンダリングされた部分は、border-radiusの値と同じ幅です。

OperaとWebkitの両方のチームに報告することをお勧めします。

Answer 2

これは、ブラウザーが部分的な枠線を持つボックスのレンダリング方法とborder-radiusの問題であると私は考えています。私はそれがあなた自身で修正できるものではないと思う（反対側の白い枠線を設定しようとする？それはうまくいくかどうか分からない）。そこ

はthe specに起草されている標準のいくつかの並べ替えである（特に、§5.4 Color and Style Transitions）あなたはそれを見てするように傾斜している場合、コーナー半径のボックスの境界線は、レンダリングされるべきかを正確になど。しかし、結局のところ、境界線や角を描く方法はブラウザに任されており、プラットフォーム間の一貫した動作は協力なしに達成するのが難しいでしょう。さまざまなブラウザで