IE7のheightの扱い

本当に久しぶりにスタイルシートの作成で悩みました。原因はIE7。登場前はIE6よりはましなはずと期待していましたが、やはりましにはなっても不完全なまま。結局IE6対策と同じぐらいの労力を割かねばならないブラウザが一つ増えただけでした。

とはいえ、スタイルシートの解釈に間違いを多く起こすIE6、IE7の対策として、スターハックの代替手段を実践してから、あまりCSSコーディングで困ることは無くなりました。SafariやFirefoxで表示を確認したら、IE6、IE7専用のCSSを作成し、W3Cの規則なんて無視してとにかく望みの表示になるように書きまくればいいわけです。

しばらく平穏な日々を過ごしていたのですが、先日高さを指定した部分があるデザインのコーディングをしました。指定した高さを超える内容は、スクロールバーを表示して対応させます。SafariやFirefoxもちろん問題なく、IE6も思い通りに表示ができ気を良くしていたのですが、IE7が今まで見たことの無い崩れ方をしていました。

文字がいくつも重なってすぐには理解できませでしたが、どうやら指定した高さに納めようと、内包する要素の高さやマージンを無視しているようです。

IE7専用スタイルシートに「scrool: auto;」「max-height: ○○px」などいろいろ試してみましたがどれも駄目。フロートさせているのが原因でもない。ほんとに途方に暮れていたのですが、はたと気づいて内包する要素全てに

height: auto;

を指定することで、文字の重なりは解消し、親要素にはスクロールバーが表示されました。いやいや、諦めないって大事ですね。

Category

• Music [15]
• Column [78]
• Mac [29]
• Web [47]