ADP: 課題発見でふれた、自分が作ったサイトでのいくつかの不具合、だいたい把握できた。
自分がページを作るときには、Windows IE6, Opera, Firefoxと、MacのSafariではだいたい同じ見た目になることを確認しているので、Windows IE5でちゃんと動かないのは、特有のバグが原因だと思われる。まとまっていないけれど、メモとして書いておく。
ひとつめ。ul-li-aでメニューを作り、特に、背景画像を使い、1ピクセルもずれてはいけないケースを考える。
こういう場合、ul以下の要素のmarginやpaddingを全部0にするのがよくあるパターンだが、ulのpaddingなのか、liのmarginなのかはよくわからないが、0にしてもなぜか左側に余白が残る。IE5.5でもそういうことがあったような記憶がある。いろいろためしてみたけれど、確実な方法はひとつひとつのliに対してidを設定し、position:absoluteをしてしまうことだ。これは、場合わけをちゃんと確定させて、あとで説明する予定。
ふたつめ。ADPでもそうだけれど、ページによってレイアウトが崩れる。まだ直していないんだが。
で、CLIEのNetFrontでも同じ崩れ方だったなあ（ADP: CLIE 未知の領域の記憶があった）と思って調べてみたら、@media printの中身も適用しているのが原因のようだ。@media printの部分を前に持ってきて、@media screenの部分を後ろに持っていったら大丈夫だった。MacのIE5が@media screenを書くと中身を全部無視してくれるのは有名だが、わからないからってなんでもかんでも適用させてしまうのは酷いなあ。とか書いておいて、もしかすると、自分の書き方の問題かもしれないが。
CSSの場合、デザインに凝ろうとすればするほどUAのバグに足を引き摺られる。それに、古いUAのみならず、これからのUAでもバグだらけのが出てくる危険性がある。こういうのをみながみな、躓きながらおぼえていかなければならないのはやはりよろしくないので、こういうときにはこうするといいらしい、これはやっちゃいけないらしい、というのを情報として伝えるようにしたいところっすな。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/370
IE の古いバージョンでは、ul 要素内の li を縦に並べてマークアップしたとき、直前直後の改行がテキスト中の改行と同じように、半角空白に変換されてしまうバグがあるようです。それを回避するため、</li で改行し><li を次の行に持ってきたりする方法が取られることがあります。これだと、<li>～</li><li>～</li>と一行でマークアップするのと同じなので、余計な改行 (=空白) は含まれないことになります。