0

IE の枠線の描画と chrome の枠線の描画は異なります。これが私の問題のcssとスクリーンショットです（ズーム付き）

.test {
    width: 10px;
    height: 10px;
    margin: 10px;
    padding: 10px;
    border-left: 1px solid green;
    border-top: 1px solid red;
    border-bottom: 1px solid black;
    border-right: 1px solid blue;
}

クロム：
ここに画像の説明を入力

いいえ:
ここに画像の説明を入力

Chrome およびその他のブラウザーの左上隅は緑ですが、IE は赤です。これは私のデザインに問題があります。どうすればこの問題を解決できますか?

jsFiddle: http://jsfiddle.net/yLdF4/

編集:これが私の本当の問題のスクリーンショットです。 ここに画像の説明を入力ここに画像の説明を入力

少し迷惑な 1 ピクセル。

4

1 に答える 1

1

この場合、どちらのブラウザーも間違っているとは思いません。同じ標準をわずかに異なる方法で実装しただけです。このような場合の境界線の角は、2 つの色を分離する対角線になるように指定されています。もちろん、幅が 1 ピクセルしかない場合、対角線はほとんど意味がありません。仕様では、垂直線または水平線を優先するように指示されていないため、ここで表示される異なる解釈の余地がわずかにあります.

この場合、本当に色を保証する必要がある場合は、:beforeとを使用:afterして、メイン ボックスとは別に側面の境界線を作成することをお勧めします。

于 2013-06-12T08:52:20.300 に答える