最近のページでこの問題に遭遇しました。当初は設計図の点線効果をシミュレートするために枠線を使用したかったのですが、枠線効果が設計図ほど見栄えが良くないことは明らかです。ちなみに、破線と点線の違いについて勉強しました。
まず文字通りに理解すると、破線と点線は両方とも「点線」を指します。それらの違いは次のとおりです。
破線: ダッシュから、ダッシュで構成される破線
dotted：点（ドット）から、点で構成された点線、点線とも呼ばれます
ここでさらにナンセンスな言葉をいくつか述べておきますが、実際には、デモを見ることで、より直感的な視覚体験を得ることができます。
さて、関連するバグについて話しましょう。もちろん、これらのバグは、ここでも IE6 と IE7 に関係する IE でのみ見事に発生します。
バグ 1: IE6 では、幅 1ピクセルの点線は破線と同じように動作します。幅が 1px より大きい場合は、通常どおりに動作します。
バグ2: IE7では、四辺の幅が1pxでそれ以外の値が混在すると、1pxの点線が破線と同じ動作をします。四辺の幅がすべて1px、または1px以外の異なる値の場合、このバグは発生しません。
バグ3: また、IE6では、ページをドラッグすると、1pxの点線または1pxの破線の枠線が実線でつながったり、隙間ができたりする場合があります。
これらのバグを解決するには、点線を使用せずに破線を直接使用するか、代わりに画像を使用するか、追加のタグとコードを使用します。
これらのバグは境界線の幅が 1px の場合にのみ発生するため、外側の周囲のタグの境界線の幅を 2px に設定し、内側のタグを追加し、それを 1px のコンテンツの背景色の境界線に設定してから、margin-top/right/ を設定します。下部/左: -1px; 外側のラベルを囲む 1px の境界線を覆い、通常の視覚効果を実現します。非常に冗長で、迷惑で、無力です。
.b6 {
境界線: 2px 点線 #000;
パディングトップ: 0;
}
.b6 .inner {
境界線: 1 ピクセルの実線 #9c9c9c;
幅: 100%;
高さ: 100%;
マージン: -1px;
位置: 相対的;
z インデックス: 100;
}
詳細についてはデモを参照してください
原文: http://www.qianduan.net/ie-bug-1-pixel-dotted-and-dashed-border.html