ベストアンサー

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

2009/04/08 00:16

CSSにてレイアウトを行っていますが、IEで表示したとき行間が詰まってしまいます。全体的に狭くなってしまうのはもちろんなのですが、たとえば文章と文章の間を で一行開けた場合も、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での表示でつまづくことが多いので困っています。

Elisha
お礼率27% (8/29)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/04/08 10:40 回答No.2

IEのバグの1つですね。IE（6/7共に確認済）でletter-spacingプロパティを適用した要素内で、brを2回以上連続してマークアップした場合、brが「1つおきにしか認識されない」現象が起こる様です。つまり： ----------------------------------------------------------- 【letter-spacingが初期値（0）】 ----------------------------------------------------------- ＜コーディング＞一行目（br2回連続） 二行目（br1回） 三行目（br3回連続） 四行目 ----------------------------------------------------------- ＜表示結果＞一行目（br2回連続）…一行空き二行目（br1回）三行目（br3回連続）…二行空き四行目 ----------------------------------------------------------- 【letter-spacingが初期値（0）以外】 ----------------------------------------------------------- ＜コーディング＞一行目（br2回連続） 二行目（br1回） 三行目（br3回連続） 四行目 ----------------------------------------------------------- ＜表示結果＞一行目（br2回連続）…行空きはなし二行目（br1回）三行目（br3回連続）…一行空き四行目 ----------------------------------------------------------- という事になります。回避するには、letter-spacingを初期値（0）にするしかありません。ただし、そうすると本来のletter-spacingの用途、文字間隔を空けたいというスタイルが使えなくなってしまって困りますよね。根本的な解決策は、ANo.1の方が仰っている様に、「単に行間を空ける（要素と要素の間に空白を作る）用途でbrの連続を使うのをやめる」事です。brはあくまで、インライン内容（テキストやイメージ）を強制的に改行する（例えば、一つの「段落」内でどうしても改行させたい箇所があった場合など）為に使うものであり、「一段落の区切り」がついた様に見せる為のものではありません。その為には、ちゃんとp要素が用意されているのですから、内容毎に適切にp要素でマークアップしてそれぞれのpに対してclassセレクタなどでマージンの値を調整し1行空きなどの視覚的効果を与えるべきです。 ※環境（ブラウザなど）によってはいくらbrを連続しても一つのbrとして解釈・処理してしまう場合もありますから。 > ブラウザ間の表示誤差をできるだけ少なくするにはどのような指定方法がよいのでしょうか？先述した通り、まずはHTML側のマークアップを文書内容に応じて適切なものにし、その上でCSSでスタイルを与える。勿論、IEは特にCSSの仕様に準拠してくれない解釈の多いブラウザですが、これらの基本作業がちゃんとできてから、その上でIE用の対処を追加すれば済む事です。

質問者