IE で border を指定した時に線と線が繋がるのを防ぐ方法

IE では border で 1px の点線を引くと、スクロールしたりしたときに線と線がくっついて見栄えが悪くなってしまうことがあります。私は Firefox では問題なく表示されるし、たまにしか表示されないので気にしていなかったのですが、今日お客さんから直してくれと頼まれたので直すことになりました。

わざわざくっつかない線を表示するために画像を使うのは嫌なので、CSS でなんとか出来る方法を探していたら以下の方法を発見しました。
タグメモのカケラ | IEで、ボーダーがうまく表示されない

点線を指定している id や class に対して position: relative を指定すると良いそうです。

1
2
3
4
5
6
hoge {
margin: 10px 0;
padding: 10px;
border: 1px #dddddd dashed;
position: relative;
}

でも私の環境では何も解決されませんでした。解決できなかった人は border を 2px にしたりすると解決されますのでいろいろ試してみるのも良いかもしれませんね。何か他にも方法があったら教えてほしいです。

コメント

  1. koniさんのコメント

    こんにちは!まさしく同じ現象で悩んでいました。
    私も position: relative; では解決せず、
    書かれている通り、2px に変更した所直りました!
    ありがとうございました。

    他の方法も研究してみます!

  2. webleさんのコメント

    お役に立てて光栄です。
    他の方法を発見しましたら是非コメントやトラックバックなどして教えてください!