このページは、IE5.x/NN4.xでないと表示に問題がでる可能性があります。

■ - Cascade Style Sheet (CSS) - ▼|

Internet Explorer4以降では、Windows98の様な表示になります。

Netscape Navigator4以降では三つのボックスの様な表示になります。

スタイルシートが使えないブラウザだと文字だけ見えるはずです。 上手くいっていればですけど。

■ - 右側表示です。-

IEとNNだとこんなに違う..なんでかな?


Cascade Style Sheet 1 (CSS1)が使えるUA(User Application = webブラウザの事) では、Windows98の表示の様な感じに見えると思います。(見えないかもしれないですけど)

表現力の向上していますがまだ使い辛いです。 スタイルの継承がUAよってまちまちなので殆ど全て値を記入するのが良いようです。

た、ブロック(block)要素とインライン(inline)要素の扱いが違う事に気をつけないと不味いようです。

border-xxのスタイルをインライン要素の<SPAN>に指定した時、 IE5(Internet Explorer 5.x)では無視するようですが、NN4(Netscape Navigator4.x)ではブロック要素扱いになってしまいます。 (使い方もおかしいので、どちらが正しいのかは判りません。)

っと違うのは、ブロック要素でwidth(横幅)を指定した時です。

IE5では固定幅になるようですが、NN4では最大幅になり、 もし表示領域がwidthで指定した幅より下回るとそれに合わせて表示しようとしておかしくなります。 (NN4をお使いの方は、幅を広げたり狭めたりしてみてください。)

らに違うのは、line-heightです。

 このように設定したいのです。line-height:1.4em;で良いと思われるのですが.. 上手くいきません。 通常指定しなくても良いのですがNN4のH1〜H6要素は、marginやpaddingでは 文字の上下の空白を無くす事ができない為line-height これだけなら、ブラウザを判断して切り換えればいいのです。 しかし困った事にNN4でH1,H2,H3,H4のline-heightを変更すると表示がおかしくなるのです。 見た目は、OKなのですがスクロールすると文字が切れる現象が発生します。


floatによる回り込み表示のテストです。

上手く使えば段組みができるかなと思いきやブロック要素で指定するとNN4では上手くできません。 <DIV>でブロック毎に、回り込みさせようとしたのですが.. 表示が無茶苦茶になってしまいます。 float処理の解除の後のブロックと重なる現象なのですが回避不能の様です。

こで、<SPAN>,<P>にfloatを指定し使ってみた例が下です。


左に回り込んで表示ここが本文だよ!?

左回り込み表示
ここの行数を少し多くしています。
ここは本文1です。 この左側に回り込んで文章が表示されます。
右回り込み表示 ここは本文2です。 この右側に回り込み表示が行なわれます。

Pエレメントによる左側表示

Pエレメントによる右側表示

通常表示による中央表示


うでしょうか?

一応それらしく見えます。 しかし..またもやIE5とNN4では、表示に違いが出ます。 その為あまり凝った事はできないです。


トップページへ
Copyright(c) 1997-1999 莎華(SAKA) / mail:saka@sf.airnet.ne.jp