普段CSSを書く時は、Operaを基準にしています。最近ではKonquerorがAcid2 Testをクリアしたそうなので、これでも確認しています。とりあえずこの2つで意図通りに表示出来れば問題ないかなーと。というかこの2つは何気なく書いても大抵意図通りに解釈してくれます。
Geckoでも一応確認しますけど、ちょっとおかしくなる事はあっても致命的な崩れ方はしないのでそんなに厳密には見てません。
問題なのはIEですよね。いつもIEには悩まされます。
何度も書いているような気がしますが、もうIEで確認するのは疲れたので、このサイトではIEで表示の確認を行っていません。
しかし。ここはそれでも良いんですが、そうも言っていられない状況もあるわけで。
最近、とある同盟サイトの維持を請け負ってしまいましてね。規模は小さいですけれど。そーいうサイトって管理人の自己満足ではなくて、利用者の事を第一に考えなくてはいけないじゃないですか。しかもWikiを利用していますので、私はあくまで裏方に徹し、参加者の方がほとんどのページを作っている現状。そして私以外の参加者はIEユーザ。
そもそも同盟サイトという、Webにおけるライト層向けとも言えるページで、IEに対応してませんってのは問題があるでしょう。
そんなわけでして。久々にIEと向き合いました。
----
まず指摘されたのが、文字が欠けるというもの。
このサイトでもよく起きるそうです。…そうです、って言うか、実は気付いてました。以前友人にも指摘されていたのですが面倒だったので放置していて、その後すっかり忘れてました。当時、原因と解決法を調べたんですが、私の書き方とソリが合わないって理由で記憶から抹消してしまったんですね。
文字が欠ける現象ですが、IEではwidthプロパティを指定していないブロック要素内でfloatプロパティを使うと起こりやすいです。必ず起きるわけじゃないのが困りもの。ウインドウサイズの変更とかスクロールとか、再描写した時などに文字が欠けたり、floatした画像が消えたりします。要するにIEではブロック要素には必ずwidthプロパティを指定しろって事らしい。
それなら単純にwidthプロパティで横幅指定すれば良いんですが、ブロック要素をセンタリングする場合などはmarginで行い、widthは指定しません。だから困るんですよ。
とは言え、上記の理由でIEに対応させなくてはならないので、該当要素にwidthプロパティを指定。
----
ここまでは良い。けど、wikiですから2カラムレイアウトなんです。
この日記と同じように、左にMenuBarがあり、右にbody、という感じ。
IEではこーいう場合floatで配置させると結構辛い事になるので、
div#menubar {
position : absolute;
top : 200px;
left : 0px;
width : 20%;
}
div#body {
margin-left : 20%;
}
というように、MenuBarをpositionプロパティで絶対位置指定した上で、その横幅分だけbodyの左マージンを取ることで配置しています。
で、このdiv#bodyにwidthプロパティが入ったわけですが、IEはwidthプロパティのパーセント指定した時の解釈が他のレンダラと異なるようです。通常、ウインドウサイズの横幅に対する割合になるのですが、IEでは表示可能な横幅に対する割合になっている気がします。…説明ヘタですね。この例で言うと、左マージンを20%取っているから残りの80%に対する割合になってしまうって事です。
ということはIEではdiv#bodyへwidth : 100%;と指定しないと横幅一杯にならない。
しかし、こーいう指定をすると他のブラウザではウインドウから右に20%はみ出してしまいます。左マージンを20%取って横幅100%のブロック要素を配置したらそうなるのは当然ですよね。
IEに合わせる為に他のブラウザを犠牲にするなんてとんでもないので、ここは隣接セレクタで乗り切ってみる事に。
どうやらIEは隣接セレクタに対応していない…のか？それとも同要素に対してスタイル指定が重複した際に上書きしないのかな？そのへんはよく分かりませんが、これで上手くいくはずです。
div#body {
margin-left : 20%;
width : 100%;
}
div#menubar + div#body {
margin-left : 20%;
width : 80%;
}
さらに。MenuBarを表示しないページでの対策として
div#navigator + div#body {
margin : 0;
width : 100%;
}
セレクタ名とかマージンの数値とか、状況によって異なるだろうけど、こんなカンジでIEでも表示出来ました。
IEでもたまに表示確認すると結構楽しいですね。