「clearfix」のIE 7対策:その2

フロートした要素がはみ出してしまうのを回避する「clearfix」のIE 7対応版として、「min-height:1%」の紹介をしましたが、今回はほかの対応方法の紹介です。

IE5を対応ブラウザにするかしなかで、分けてみました。

「clearfix」のIE5.5~IE7対応版

  • 「.clearfix」に「zoom:1;」を指定します。

「clearfix」のIE5~IE7対応版

  • 「overflow:hidden;」を指定し、IE5用に「height:1%;」を指定します。

clearFixの注意点

  • contentにピリオドの指定をしないと、Netscape 7で要素が非表示になる→「height:1px;」で解決するがレイアウトが1pxずれてしまう。
  • IE7用に「display:inline-block;」「display:inline-table;」を利用すると、FirefoxのJavaScriptコンソールでパースエラーがでてしまう(指定は無視される)。
  • IE7用にdisplayを使用すると、displayの値を切り替えるスクリプトを使用していると手間が増える。

clearFixの紹介サイト(英語)

Clearing a float container without source markupPosition Is Everything

sponsors

top of page

©2018 coliss