IE6에서 오버플로우 속성이 작동하지 않는 이유

1625 단어
IE6에서 overflow 속성이 작동하지 않는 이유는 다음과 같습니다.
IE6 브라우저에서 만약에 대상의 하위 대상이 절대적 위치나 상대적 위치라면 부모 대상의overflow 속성은 하위 대상에게 작용하지 않습니다.
코드 인스턴스는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title> </title>
<style type="text/css">
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    overflow: hidden
}
.children {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    position: relative;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"> , , !</div>
</div>
</body>
</html>

위 코드의 하위 div가 넘쳐나고 부모 대상의overflow 속성이 적용되지 않습니다.이 버그를 해결하는 방법은 부모 대상에 절대 포지셔닝이나 상대 포지셔닝을 추가하는 것입니다.코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title> </title>
<style type="text/css">
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
.children {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    position: relative;
}
</style>
</head>
<body>
<div class="parent">
  <div class="children"> , , !</div>
</div>
</body>
</html>

원본 주소:http://www.51texiao.cn/div_cssjiaocheng/2015/0429/420.html

좋은 웹페이지 즐겨찾기