さて、この2本の線、実は同じ太さ。でも、目の錯覚ではありません。
ただし、IE6の人には、上の方が太く見えているんではないかと思います。それはバグ。
div.bar {
background:#999;
height:5px;
}
こんなCSSを書いて、太めの線を作ったりします（えっと、その善し悪しは別として）と、IE6では高さ5px以上になってしまうというバグがあります。
その解決方法がなんと、
font-size:0;
を加えるというもの。「あ゛ー」と思わず叫びました。
なんとなく、このdivの中にあるものが上下に押し広げているんであろうということは想像していたので、この解決法には納得するのですが、中に文字を入れてないのに！と小腹を立てます。
具体的なサイズはわかりませんが、文字のサイズよりも小さい高さを指定すると起こる問題のようなので、20px前後ぐらいから起こらなくなるのかなと思います。
しかもこのバグ、そういえばこれまでに何度も出会ってるんですが、それを忘れていて、その度にショックを受けるのです。CSSのバグ回避方法は、時々面白い方法だったりするので、それを発見した方に敬意を示すとともに、みんなIE8になってしまぇ〜と魔法を掛けたくなるのです。
その前にみなさーんIE7のアップデートはこちらです。もちろんWindows Updateでもよし。
怖くありませんし、痛くもありません（本当に？）。お早めにアップデート推奨です。
世界中のウェブデザイン担当が（多少は）喜びます。