予防線型 CSS

足を引っ張るダメな子

ちょっと、引用します。

各メジャーブラウザがバージョン7になり、CSSに対する互換性はかなり高くなりました。しかし、この記事に代表される問題のようにWindows版のIEはCSSに対する性能は他のブラウザに比べてかなり見劣りするようになってきました。

つまり、Windows版IE以外のブラウザでは見た目の互換性がかなり高くなってきているのです。 Windows版IEはシェア的には大多数のブラウザですが、数あるグラフィカルブラウザの中では少数派の表示を行っていると言い換えることができます。

Webページをデザインする場合、多くの人は(そのシェアの高さも含め)Windows版のIEで表示確認を行っているようですが、これはブラウザの種類的には少数派のブラウザで表示確認を行ってから多数のブラウザへの対応を考えなくてはいけないという非効率的な手法です。反対にMozilla/Netscape7や、Opera7を使って表示確認を行い、それら多数のブラウザで互換を確認できたら、 Windows版IEの非互換部分に対してこの記事のように個別対応を考える方が効率的と言えると思います。

Web標準化Tips（もじら組）/ ブロックレベル要素をセンタリングする方法より抜粋

上記の引用記事（の引用していない部分）で何が語られているのかというと、ブロックレベル要素（div とか p）をセンタリングするのは、本来なら以下の方法で可能であるというコトです。

<div style="margin-left:auto;margin-right:auto;border:solid red 2px; width: 16em">
★★★ブロックレベル要素★★★
</div>

これは Firefox で上記の HTMLファイルを開いた場合の画面です。左右のマージンを auto にすると、margin-right と margin-left が同じ長さに調節されるようです。つまり、中央に寄せられる。

これは IE6 で開いた場合です。 IE ではブロック要素の左右のマージンを auto にしても、中央寄せが実現されません。そこで、IE でセンタリングする為にはどうすればいいのか？　という問題を検証しているのが引用元のページ内容です。
引用元：ブロックレベル要素をセンタリングする方法

また、body要素の左右のマージンを同じ値にするコトによってもセンタリングできます。左右のマージンが 20% なら中央部分の幅が 60% になる計算です。ただし、この方法だとセンタリングする要素の横幅を % でしか指定できませんが...。

どうしても、IE と他のブラウザで見た目を統一できないような場合、重複する内容の CSSプロパティを二重に記載する方法があります。あるブラウザで CSS の表記を読み取る経緯を考えた際に、そのブラウザにとっては意味の無い（しかし、他のブラウザでは有効に作用する）記述を書くという方法です。あるいは、一見無駄に見えるような構図で記載するコトによって、見た目の統一を図る...、だとか。

div で二重に囲う

例えば width: 400px の div があるとします。 IE5.5 以前の場合、width に padding や border が含まれますので、div の横幅は 400px となります。 Mozilla や Opera といったブラウザの場合、width に padding や border が足し算されますので、 div の横幅は 400px ＋アルファとなります。

このように、IE と IE以外のブラウザで div の大きさを統一するコトができません。本来なら padding と border は width に含まれないものであり、大概のブラウザではそうしているのですが、IE だけは違う方式を採用しています。

そこで、div の中に div をぶち込むという対策もありえます。外側の div には width と height のみ指定してやります。それで、内側の div に padding と border を指定してやります。これによって、ブラウザ間で生じる見た目の差異を埋めるコトができます。

IE で <q>...<q>

<q> は”短文引用”をマーク付けするインライン要素ですが、 IE では見た目の体裁が変化しません。しかし、引用文を区別する為に q を使いたいという人もいるでしょう。そこで妥協的な手段として、q に CSS で独自のスタイルを与えるという方法があります。

q { text-decoration: underline }
例えば上記のように指定してやれば、<q> ... <q> の適用範囲にアンダーラインを付加できます。実際にやってみると、下記の様に表示されます。

q が認識されるブラウザでは下側の様に、引用符（ " ）が付きます。 IE では <q> ... <q> のしかるべき場所に引用符が付かないのですが、 CSSプロパティで与えてやったアンダーラインが付くので地の文との区別が付きます。