【CSS】IE8で見られる表示の不具合

Tweet

Category css 2010/12/17

IE8で、テーブルのセルの中の画像にmax-width を指定したら困った表示になってしまった。

画像（img要素）自体はmax-widthに収まった大きさで表示されているのだが、その画像が入ったセル（td要素）が、画像のもともとの大きさをに拡大してしまうという現象が発生。

この場合は、max-width と max-height を両方指定したら直ったが、両方指定したくないことだってある。

テーブルの方に table-layout:fixed を指定せよという説もあり（その方が仕様どおりとか）。

他にも、IE8ではこんな表示崩れが発生するとのこと。

* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.

max-width、min-width関連で異常な表示になるようなので、使いどころに注意が必要な感じです。