SQLの窓

2013年02月08日


CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い


pre {
	white-space: pre;
	white-space: pre-wrap;
/*	white-space: pre-line; */
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}
PRE 要素内では、改行コードが改行として表現されます。しかし、white-space の pre-line を指定すると『連続する半角スペース・タブ・改行を、1つの半角スペースとして表示』するので、連続する二行の改行が存在する場合どうなるか・・・という事なんですが。

Google Chrome をメインに使っていたので

これで何が問題なのか気が付かなかったのですが、Google Chrome ですと、改行の数がそのままになって、Firefox だと、改行がなくなるようなのです。で、IE はと言うと、Google Chrome に近い結果なのですが、他のパターンだと Firefox と似ている・・・という良く解らない事実に遭遇してしまいました。

結果的に、それぞれレイアウトが違う

もともとは、pre 内の文字列を自動改行する為に使った CSS の一部だったのですが、全てのブラウザで確認しなかった為にかなり長い間放置していた事になります。

PRE で改行を含めて文字列を配置しておくと、自分にとってはいろいろいい事があるので、昔から使っていたのですが(自分で改行位置を決めていた)、スマホに対応するのに『自動改行』が必要になりました。で、インターネットで調べて Google Chrome でテストしてうまくいったのでそのまま・・・という事です。

※ DIV 内で改行を BR にまかせている場合は発生しないと思います。



【HTML / CSSの最新記事】
posted by lightbox at 2013-02-08 23:27 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり