読者です 読者をやめる 読者になる 読者になる

Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

まあ、下手すると忘れるから、備忘録

HTML&CSS

今日は一緒に働いている同僚(あ、頭痛が痛いみたいになってしまった)が、「横並びのメニューがずれてしまう><」と困ってました。具体的にいうとこんなのですね。

<ul>
   <li><a href="http://www.hogehoge.com"><img src="images/image_01.jpg"></a></li>
   <li><a href="http://www.mogemoge.com"><img src="images/image_02.jpg"></a></li>
   <li><a href="http://www.togetoge.com"><img src="images/image_03.jpg"></a></li>
</ul>

で、CSSはこんな感じ。適当に。

ul {
  width: 75px;
  height: 15px;
  float: left;
}

li {
  width: 25px;
  height: 15px;
  float: right;
}

まあ、色々と突っ込み所があるメニューですが。画像直置きかーとかね。で、どんな時にズレるというと、ブラウザで「文字を大きくする」を実行するとどんどんとメニューが下にずれて見えなくなっちゃうというんです。で、どうも悩んでらっしゃったんで。

ul {
  width: 75px;
  height: 15px;
  float: left;
}

li {
  width: 25px;
  height: 15px;
  float: right;
  display: block;
}

みたいにしたらどうでしょ?と言ったら「直りました!」と喜んでました。今回画像ですけど、liとかテキストで作ったりすると、blockにしないと押しにくいですしね。本当はaタグにもblock付けてやるのが良いのかな?自己流なんで、ツッコミ入れられそうな気がしますけど。

あ、そうそう。この修正前のCSSで面白かったのが、MacのFx3だと「文字を大きくする」をするとメニューの画像自体がどんどんと拡大していったんですが、Safari3.2だと画像の大きさは変わらずに下にどんどんとズレていきました。ひょんな所からブラウザのレンダリングエンジンの違いが分って面白かったですね。