天天看點

IE6、7下父元素overflow:hidden;包不住子元素解決方案

在IE6、7下面父元素包一個設定了相對定位的子元素,設定overflow:hidden;應該超出部分隐藏的,但實時并不是這樣 。

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: px;
            height: px;
            background-color: red;
            border: px solid black;
            overflow: hidden;
            /**position: relative;*/
        }
        .content{
            width: px;
            height: px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>
           

效果圖:

IE6、7下父元素overflow:hidden;包不住子元素解決方案

解決方案:

針對ie6、7給父級元素設定相對定位。

*position:relative;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: px;
            height: px;
            background-color: red;
            border: px solid black;
            overflow: hidden;
            *position: relative;
        }
        .content{
            width: px;
            height: px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>
           

效果圖:

IE6、7下父元素overflow:hidden;包不住子元素解決方案

新手上路,歡迎反駁!