クロムの境界線のレンダリングにバグがある可能性があります。境界線半径が設定された背の高いオブジェクトの左側に不適切な境界線の色を使用しているクロム
- 要素を作成します(私はdivとtdの両方の位置:静的と位置:絶対)で作成しました。
- このオブジェクトの幅を2倍以上にする
- 両側に異なる色の境界線を割り当てます。
- 丸い角のボーダー半径を指定します。
最終的には、左端の中央部分が境界左色の代わりに境界右色になります。具体的には、wがオブジェクトの幅である場合、上のwピクセルと下のwピクセルは正しいが、中央の(h〜2w)ピクセルは誤って色付けされる。
ここにコードのスニペットとその問題を示すスクリーンショットがあります。
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
<style>
div#borderBug
{
position:absolute;
top:10px;
left:10px;
width:152px;
height:541px;
border-width: 2px;
border-style: solid;
border-radius: 20px;
border-left-color: blue;
border-top-color: yellow;
border-right-color: red;
border-bottom-color: green;
background-color: #dedede;
}
</style>
</head>
<body>
<div id="borderBug"></div>
</body>
</html>
クロームの私のバージョンは、Windows XP上で実行されている、17.0.963.56メートルです。私はSafari、Firefox、IE8でこの問題は確認できません。
これが既知の問題であるかどうかを誰でも確認できますか、誰かが標準的な回避策を知っていますか?
私が考えることができる最善の回避策は、境界線の画像を使用することですが、まだこれをテストして、同じバグに苦しんでいるかどうかを確認できませんでした。
もう1つの(醜い)オプションは、境界線の問題のあるセクションの上に正しい色の別のHTML要素を配置することです。
これに詳しい情報を提供できる方は、事前におねがいします。
にマージ。 http://jsfiddle.net/j4yT4/コーナーが画面に表示されないとき、色は正しいです... –