Home > Windows > Internet Explorer > ver.6 幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない

幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない

幅も高さも明示されていない相対配置要素に overflow: hidden; を指定しても、絶対配置された子孫要素に対してその指定が効かない。

例示

<div style="position:relative; overflow:hidden; border:2px solid red;">
    A
    <div style="position:absolute; border:2px dashed blue; top:0em; left:1em;">
        B<br />
        C
    </div>
</div>
A
B
C

親要素をはみ出す部分は表示しないようにしています。親div要素の高さが1行分に対し子div要素の高さは2行分なので、子div要素の下側は隠れてしまうはずです。

スクリーンショット

Moz1.0.1Moz1.0.1での表示(標準モード)

WinIE6WinIE6.0での表示(標準モード)

補足

親要素で幅か高さの少なくとも一方を明示すれば、このバグを回避できます。ただし、autoやinheritでは回避できません。

<div style="position:relative; width:99%; overflow:hidden; border:2px solid red;">
    A
    <div style="position:absolute; border:2px dashed blue; top:0em; left:1em;">
        B<br />
        C
    </div>
</div>
A
B
C

修正状況

WinIE6.0では標準・互換の両モードで不具合の発生が確認されました。

Home > Windows > Internet Explorer > ver.6 幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない

Search
オススメ書籍
Feeds

Return to page top