ウェブキットのボーダー半径と1つの太いボーダーの問題

Question

申し訳ありませんが、私は、Google、stackoverflow、その他のサイトでborder-radius、border width、およびcolorの組み合わせをどのように扱うかについて検索しています1つの辺がより太い境界線と異なる境界線色を有するボックス。

私は、現在作業中のプロジェクトとJSfiddleでテストしてテストしています。

私は、このバグに影響を与えないスタイルを例示する、複数のテストケースを含むJSfiddleを作成しました。 http://jsfiddle.net/kGST9/4/

ほとんどのボックスには、上部と下部の境界線の中央に赤い帯があります。また、さまざまなテストケースでは、赤の帯の幅は、左の枠線の幅とボックスの幅に応じて変化します。私は本当に厚い国境がどんな側にあり、同じように振る舞うかは問題ではないと信じています。これはSafari 5とChrome 16の両方の最新リリースであるWebkitでのみ発生し、境界線半径をサポートするすべてのバージョンのWebkitに適用されると仮定しています。

Firefoxにこの問題は表示されません。

私はフォーラムやブログポストでこのバグについて話している人がいなくても、この問題を抱えているとは思っていません。 lol

私はまた、位置、表示、オーバーフロー、背景クリップ、およびそれらのさまざまな値など、ボーダーに関係のないその他のスタイルを追加しようとしていません。

そうすれば、私はこれの底まで下がることができます。

よろしく、確かに非常に奇妙な
CSSDevMonkey

Answer 1

。私は、バグが表示されるかどうか（そしてどれくらい重大か）が、ボックスの全体の幅と高さの比率とボーダー半径のサイズの組み合わせに結びついているかどうかを調べた後に見つけました。ボーダー半径を20ピクセルに増やすことで、問題は1つの場合を除いてすべて消えてしまいます。また、すべてのdivの幅を200ピクセルに縮小すると、問題が解決するようです。

間違いなくバグのようです。さまざまな幅/高さの比率、ボーダー半径、またはボーダー幅で再生する以外に、直接の修正が何であるかは不明です。あなたはおそらく既にこれを十分にしているでしょう。

Answer 2

私はこのポストを見つけただけで、divのボーダー半径と幅と高さの比率が違うバグを抱えています。私は異なるサイズの罫線を使用していませんが、異なる色です。

私はボーダー半径とボーダーカラーを持っています：赤青青赤、左のボーダーはサイズに応じて青の帯を取得します。 Web-Kitブラウザでのみ見えますが、私は何も回避することができません。あなたが解決策を見つけない限り、私はそのバグを推測する。

私の問題で自分のjsfiddleを載せてください。
http://jsfiddle.net/6xUNr/