WinIE6で見るとブログやスタイルつきテキストページで行間の調整が効いていない

RW3.6検証済みRW3.5検証済み
Rapidweaverで作ったサイトを、WindowsInternet Explorer6で見た時に、行間が詰まっているなと感じたことはありませんか?
HTMLコードで作ったページは特に問題ないと思いますが、ブログやスタイルつきテキストで作ったページは
line-hightで行間の指定をした(してある)にも関わらず、指定前となにも変わっていないことがあると思います。

以前、mixi内のRapidweaverコミュニティで、この話題が出た時に解決策を教えてくれた方がいらっしゃったのでご紹介することにしました。(
カスタマイズの基本を読んでいることを前提として話を進めていきます。)

ブログやスタイルつきテキストで作ったページのソースを見ると分かると思いますが、

ほにゃらら

みたいなコードのオンパレードです()。これは改行ごとにspanタグが入る、Rapidweaverの困った仕様のようです…。そこで解決策として

span {line-height: 1.6 !important;}

というコードをstyle.cssbody{ }の下辺りに入れると、WInIE6でも行間が意図通りに表示されるみたいです(実際されました)。
1.6は文章に対して行間160%と言う意味だそうです。この数字はお好みで。
!importantというのは宣言の優先順位を上げているそうです。
style.cssを弄りたくない場合は、
ページインスペクタのCSSの所にページごとに書き込めばOKです。

他には、WinのIEだけに適応させたい時は

* html span {line-height: 1.6 !important;}

とするといいそうです。
さらに、MacIEでも無視させたい時は

* html span {_line-height: 1.6 !important;}

とするそうです。この辺りがよく分からない人は「CSSハック スターハック アンダースコアハック」などのキーワードで検索してみて下さい。

ブログやスタイルつきテキストは、そのままだとほとんどspanタグで文章が構成されるので、spanタグに直接
line-heightを指定した、ということだと解釈していますがあってるんですかね?
!importantを付け加えたのがポイントだそうですが、おそらくHTML上で使用されるspanタグよりも、CSSで指定したspanタグを優先させるために、!importantを付けてあるのだと思います(多分…)。
もう少し言うと、CSSの優先順位は、スタイルシートに記述したものより、HTMLファイルに直接書かれたCSSの方が優先されるみたいなので、その優先順位を
!importantで変えたってことですよね?(誰に聞いているか分かりませんけど)。

まぁ意味がわからなくても(笑)、上で説明したコードを使えば行間はある程度思い通りになるみたいなので、このことで悩んでいた人はやってみてはどうでしょうか。
このブログではブラウザを区別しない一番上のものを使っています。というか、このブログはMacユーザーだけしか見ないか(笑)。

付け加えておくと、この解決策を教えてくれた方は、他にも各ブラウザ間で文字の大きさを統一する方法や、フォントの指定方法なども教えて下さいました。興味のある方は、左のサイドバーにあるRW in mixiのバナーをクリックして覗いて見て下さい。


参考リンク:
CSS解説 -カスケード (The cascade)-(宣言の優先順位について詳しく説明してあります)

blog comments powered by Disqus