« ゴッゴルゴッゴルについてまじめな考察 | メイン | 次のゴッゴルを埋めよ2(30点) »

NN4xのみを個別にはじくCSS

ええ、このサイトは確かにHTMLとCSSを解説するサイトでしたよ。

しかし、タイトル「HTMLとCSSを使いこなす」のHTMLはいつのまにか「ゴッゴル」になってしまい、CSSの記事も、気が付けば8月1日より更新なし。すみません、私もいろいろやりたいことが他にあったもので。。。

で、本題の件「NN4xのみを個別にはじくCSS」についてメモ。

NN4X系を完全にはじいてしまうCSSは以前にもメモしたが、特に仕事で作るWEBページには、「NN4.xも、まったくIEと同じじゃなくてもいいけど、完全に見捨てたりはしないでネ」というリクエストも多いわけで。

そうすると、テーブルレイアウトでオーソドックスに組み立てつつ、取り入れられるところだけCSSを入れ込むことになる。

で、以下はそんな場合の実例。たとえば行間を少し広げて、読みやすい文章にしようとしたとする。
ところが、行間を指定する「line-height」は、NN4系でも読み込まれるのだが、その文中にimg画像があると、画像に文がかぶってしまう致命的なバグがある。

では、「line-height」は使えないのか?いえ、あきらめるのは早い。

html #withoutNN4 {
line-height: 150%;
}

ふつうは「#withoutNN4」とだけ書くが、その前に、 「html」属性を追加する。この形式にNNは対応していないので、「#withoutNN4」は読み込まない。従って、NN4x系では文章の行間は150%にならないわけだが、致命的なバグは回避しつつ、きちんと対応しているIEなどのブラウザでは行間が広がる。

副作用として、icabなど一部マイナーなブラウザも同様にこの形式を読み込まないようなので注意。IE、NN6以上、Opera、もじら系、Safaliなどは対応している。