角丸CSS IE6対策 div空を使わない方法
今更ながら、角丸CSSのやり方の備忘録。
結論：widthを指定する
HTML5からは、角丸が画像を使わずCSSだけでできるみたいだし、javascriptやtable小技でやったりもあるが、IE6を考えてまだ画像でやるのが一般的。
divタグで空にしてheight指定で背景に角丸画像背景を入れるのだとIE6でも問題なしだがソース的に、空はちょっとマズイだろということで、top middle bottomなど3つで上下を挟むやり方でtopとbottomにpaddingを高さ指定してやる。
すると、何だかtopの下に妙な空きがIE6だとできてしまうが、widthを指定すると解消される。
ちなみに、背景画像bottomなんかを超縦長にしておけば、divがtop bottomと２つですむ。PNGでも以外に超縦長の画像は、容量が増えないので縦可変の激しくないある程度の高さですむ場合は、ソースが軽くなる背景超縦長バージョンがいいかと。
あと、
縦並びul li aもIE6だと変な上下の幅ができるがこれもwidthを指定すると解消される。
これも忘れてたので、備忘録。
