IEと他ブラウザでの行間について

質問

CSSにてレイアウトを行っていますが、IEで表示したとき行間が詰まってしまいます。
全体的に狭くなってしまうのはもちろんなのですが、
たとえば文章と文章の間を<br><br>で一行開けた場合も、Firefoxなどでは
--------------
一行目

二行目
--------------
となってくれるのですが、IEだと
--------------
一行目
二行目
--------------
につまってしまいます。

作成環境はMacOSX、DreamweaverCS3
確認はmacでFirefox3、Safari3、Opera9.5、Netscape7.1です
winでIE6、Firefox3です。

ブラウザ間の表示誤差をできるだけ少なくするにはどのような指定方法がよいのでしょうか？

CSSのフォント関係の指定の部分のみ抜粋します。

html
{font-family:'Verdana', sans-serif;
color:#444444;
font-size:66%;
line-height:2.0;
letter-spacing :0.2em;
}

これは小さなことなのですが、他にもIEでの表示でつまづくことが多いので困っています。

回答No.2

abril · ベストアンサー

IEのバグの1つですね。IE（6/7共に確認済）でletter-spacingプロパティを適用した要素内で、brを2回以上連続してマークアップした場合、brが「1つおきにしか認識されない」現象が起こる様です。つまり：

-----------------------------------------------------------
【letter-spacingが初期値（0）】
-----------------------------------------------------------
＜コーディング＞
一行目（br2回連続）<br><br>
二行目（br1回）<br>
三行目（br3回連続）<br><br><br>
四行目
-----------------------------------------------------------
＜表示結果＞
一行目（br2回連続）…一行空き

二行目（br1回）
三行目（br3回連続）…二行空き

四行目
-----------------------------------------------------------
【letter-spacingが初期値（0）以外】
-----------------------------------------------------------
＜コーディング＞
一行目（br2回連続）<br><br>
二行目（br1回）<br>
三行目（br3回連続）<br><br><br>
四行目
-----------------------------------------------------------
＜表示結果＞
一行目（br2回連続）…行空きはなし
二行目（br1回）
三行目（br3回連続）…一行空き

四行目
-----------------------------------------------------------

という事になります。回避するには、letter-spacingを初期値（0）にするしかありません。
ただし、そうすると本来のletter-spacingの用途、文字間隔を空けたいというスタイルが使えなくなってしまって困りますよね。根本的な解決策は、ANo.1の方が仰っている様に、「単に行間を空ける（要素と要素の間に空白を作る）用途でbrの連続を使うのをやめる」事です。brはあくまで、インライン内容（テキストやイメージ）を強制的に改行する（例えば、一つの「段落」内でどうしても改行させたい箇所があった場合など）為に使うものであり、「一段落の区切り」がついた様に見せる為のものではありません。その為には、ちゃんとp要素が用意されているのですから、内容毎に適切にp要素でマークアップしてそれぞれのpに対してclassセレクタなどでマージンの値を調整し1行空きなどの視覚的効果を与えるべきです。
※環境（ブラウザなど）によってはいくらbrを連続しても一つのbrとして解釈・処理してしまう場合もありますから。

> ブラウザ間の表示誤差をできるだけ少なくするにはどのような指定方法がよいのでしょうか？

先述した通り、まずはHTML側のマークアップを文書内容に応じて適切なものにし、その上でCSSでスタイルを与える。勿論、IEは特にCSSの仕様に準拠してくれない解釈の多いブラウザですが、これらの基本作業がちゃんとできてから、その上でIE用の対処を追加すれば済む事です。

お礼

詳しい解説ありがとうございます！基礎的なところから至らず非常に恐縮です。とても勉強になりました。少しずつ学んでいこうと思います。

回答No.1

naokita

letter-spacing :0.2em;と<br><br>の連続のせいじゃないかな？

ただ、基本的に<br><br>と連続させるのは、NG。
<p>あああああ<br><br>いいいいい</p>
上記では、無く下記に。
<p>あああああ</p><p>いいいいい</p>

お礼

ありがとうございます！<br>を重ねるのはよくないのですね。基本的なところから至らず非常に恐縮です。とても勉強になりました。