このページは「ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？」のサンプルページです。
画像とテキストを普通に並べる
あいうえお
かきくけこさしすせそ
解説
普通にテキストと画像を並べただけで、Internet Explorer 7の「ページの拡大」機能を使うと文字が重なる。
サンプルソース
<p>あいうえお<img src="square.gif" />かきくけこ<img src="square.gif" />さしすせそ</p>
画像とテキストを普通に並べる (letter-spacing: 0;)
あいうえおかきくけこさしすせそ
解説
親になるタグのスタイルシートで「letter-spacing」の値を設定すると、Internet Explorer 7の「ページの拡大」機能で崩れない。
サンプルソース
<p style="letter-spacing: 0;">あいうえお<img src="square.gif" />かきくけこ<img src="square.gif" />さしすせそ</p>
画像とテキストを普通に並べる
あいうえお
かきくけこ
さしすせそ
解説
letter-spacingをとくに設定しなければ、<br />は正しく動作する。
サンプルソース
<p>あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
画像とテキストを普通に並べる (letter-spacing: 0.1em;)
あいうえお
かきくけこ
さしすせそ
解説
letter-spacingの値が0以外だと、<br />が正しく認識されない。
サンプルソース
<p style="letter-spacing: 0.1em;">あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
画像とテキストを普通に並べる (letter-spacing: 0;)
あいうえお
かきくけこ
さしすせそ
解説
letter-spacingの値が0であれば、<br />が正しく動作している。
サンプルソース
<p style="letter-spacing: 0;">あいうえお<br /><br /><br /><br />かきくけこ<br /><br /><br /><br />さしすせそ</p>
このページは「ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？」のサンプルページです。