点線or波線が崩れるIEのCSSバグ回避｜結果 Oh! Life (旧ブログ)

3年くらい前にやってたアメバブログでも書きましたが、未だに役に立ちそうな情報なので、また公開したいと思います。 HTML + CSS のコーディングに於いて、レイヤのサイド（left or right）に 1 ピクセルの点線や波線を施した場合、IE では縦スクロールしただけで見事に崩れてしまう不具合をご存じでしょうか？ こんな感じです。 これは dashed （波線） の場合ですが、これを仮に dotted （点線） を使っても同様に崩れます。 しかし、ボーダーの太さを 2 ピクセル以上に設定すると不具合は発生しません。 1 ピクセル時のみの不具合のようです。 蛇足ですが、IE 6 では 1 ピクセルの点線が 1 ピクセルの波線とまったく同じレンダリングをしてしまうと言うバグもあります（笑） さて、この現象の回避策を、たまたま CSS を触っていたときに発見しました。 一見ボーダーとは無関