galaxy s2のborder表示で気付いたこと
最近始めたスマホのブラウザ系アプリ開発最中に嵌ってしまったborder表示バグについて。
galaxy s2のborderは1pxだと太さが不均一になる
- div、Table、td、ul、liなど要素に対して1pxのborderを設定すると、縦横の太さがそろわなくなる。
- 主にに縦線が太くなる。
- 奇数、偶数で交互に太さが変わる。
原因はborderに奇数の数値を設定したこと
- 1pxのdottedだと顕著ですが、奇数を設定するとドットの大きさが正方形になってない。まるでdashedのようになってます。
対処法はborderに偶数の値を設定する
- borderは奇数の数値を設定しない。
- 2px、4pxなど偶数のborderを設定する。
galaxy s2でTableのborderを均等にする
Tableのborderバグを抱えるWebKit系ブラウザの特徴を踏まえると以下のような設定になるかも。
- border-collapse: separate;
- border-spacing: 0;
- border-widthは偶数に設定する。
galaxy s2はもともと評判良くないんですが、まさかこんなバグがあったなんて…。
ググっても出てこなかったので備忘録として。
