IE7とletter-spacing

IE7のロゴInternet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法は、letter-spacingをうまく設定してあげることだった。


CNET Japan:Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法について。
http://japan.cnet.com/blog/webclip/today/2008/01/09/entry_25003869/

「ページの拡大」機能まで検証する機会がなかったため、このような現象に悩まされているWebデザイナーが多いことを知りませんでしたが、CNET Japanさんの記事を見て、これはこれはと覚書。

具体的な方法は以下。

bodyや必要箇所では値を設定し、brタグにletter-spacing: 0;を設定することで、Internet Explorer 7の「ページの拡大」でも崩れず、また文字間も調整することができる。具体的には次のようにする。

サンプルソース
body { letter-spacing: (任意の文字間を指定); }
br { letter-spacing: 0; }

WinIEでは、<br>にletter-spacingの値が0でないと改行が無視されるバグがあるのですね~。

■関連リンク

WinIEのバグ:letter-spacingを指定した要素内で連続したbr要素が無視される
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

letter-spacingをマークアップする際の注意点 – TRANS [hatena]
http://d.hatena.ne.jp/aratako0/20070131/p1

コメントを残す