トップ > memo > 本日のエントリのレイアウト崩れとなぜ？

本日のエントリのレイアウト崩れとなぜ？

memo


レイアウトが崩れていた事に、「はっ」として、どうしてそうなったのかを調べた、memoです。

私たちが、何気なく見ているブラウザの画面は、htmlを書いた書き方によって、標準モードで表示されたり、互換モードで表示されたりと、異なる表示を行います。
このような問題で、たいてい、赤っ恥を書いたことがある人が結構いて、その中の一人が、誰かさんなわけです。


f:id:tenman:20100604151444p:image:w200:left


たまたま、IE8で自分のブログを表示してしまった。
表示が崩れて、blockquoteが回り込んでいる。
画像をサイドにおいて、右側にキャプションを入れるような場合に、以下のように書くと簡単なので、習慣になっている。

<div class="intro">
<img src="example.png" style="float:left">
<div style="overflow:hidden">こんなこと書いちゃって、</div>
<br style="clear:both;" />
</div>





しょうがないので調べた。

互換モードでも回り込まないブラウザ

  • firefox3.6.3　
  • Chrome6.0.422.0　
  • Oprera10.53は、

互換モードで回り込むブラウザ

  • IE8

対策

<div class="intro">
<img src="example.png" style="float:left">
<div style="overflow:hidden;*width:100%;">こんなこと書いちゃって、</div>
<br style="clear:both;" />
</div>

こっちのほうが素直か？

<div>
[f:id:tenman:20100604151444p:image:w200:left]
<div style="margin-left:230px;padding:10px;">
たまたま、IE8で自分のブログを表示してしまった。
表示が崩れて、blockquoteが回り込んでいる。
画像をサイドにおいて、右側にキャプションを入れるような場合に、以下のように書くと簡単なので、習慣になっている。
</div>
<br style="clear:both;" />
</div>


TOP