いつもいつもブラウザのレンダリングエンジンにはドキドキさせられます。

Webページを作成後の一番時間を費やす作業は、このレンダリングエンジンに対応した CSS の記述では無いでしょうか。

特に IE は独特で、他のブラウザと解釈がかなり異なります。
その IE がシェアを牛耳っているので、事は複雑さを増します。

先日、久しぶりに驚きました。
以下のソース、どういう表示になると思いますか？

<pre style="white-space: normal">
This
is
a
test
text.
</pre>

なんとなく

This
is
a
test
text.

と表示されそうな気がします。
確かに IE ではそう表示されました。

ところが、Firefox, safari, chrome それぞれでは

This is a test text.

と表示されるのです。

ミソは
style=”white-space: normal”
の部分です。

ここを参照すると、デフォルトは「normal」となっています。

では、以下のソースはどうなるでしょうか？

<pre>
This
is
a
test
text.
</pre>

これは

This
is
a
test
text.

と表示されました。

つまり、pre に関して、デフォルトは normal ではない、という事です（IEはデフォルトでnormal=preみたいですね）。

こういう違いは随所にありますが、なんとかならんもんかと、悩むわけです。。。。

Tweet