リンクボタンに隙間があく？ （2006/8/10記）
テーブルレイアウトからCSSレイアウトに切り替えてから、微妙な部分で不具合があるのがずっと気になっていました。
これは、Windows版Internet Explorer6.0だけに起こる表示の不具合です。FirefoxやMac版Internet Explorer5.x、Safariなどでは問題ありません。
どういう現象かと言うと、メニューボタンなどを左サイドに配置した場合に、ボタンが縦に並びますが、その際に、ボタンとボタンの間に、わずかな隙間が開くのです。ボタン形状によってはまったく気にならない場合もあるのですが、平たい板状のボタンを隙間なく並べているようなデザインの場合で、バック色と違う色のボタンを作ったときに、隙間がはっきりと分かり、明らかにデザイン的に意図しない状態になるのです。
Windows版IE6.0だけの問題、と言っても、シェアはトップですから、おおかたの人は、隙間が開いているのを見ているということになります。
テーブルレイアウトで作ったページは、この隙間はできていません。
ということは、CSSでの記述に何か間違いがあるということになります。
疑わしい部分はひととおりテストしてみましたが、原因がわかりませんでした。
きのう、その問題とは全く別に、何気なく解説本を読んでいたところ、偶然にもその中に興味深い記述を発見！！
「画像を表すimg要素がインライン要素であり、その縦方向の位置を調整するvertical-alignプロパティの初期値がbaselineであることが原因して、画像の下にわずかな隙間ができる」
とあります。
もしかして、これが原因かも。と思い、CSS中のメニューの部分にvertical-align：bottom;を追加してみました。
すると、あ〜らなんと！！ 隙間が消えちゃったのです。
あわてて、今までに行ったCSSレイアウトによるサイト全部に、CSSの追加記述を行いました。
ひとつ疑問点が解決しました。
ずっと気になっていたことなので、急に目の前の霧が晴れたような気分でした。
でも、これは数ある問題点のうちのひとつに過ぎません。
Webの世界はまだまだ謎だらけです。日々、勉強していくしかないようです。
