IE6 및 IE7에서 `overflow: Hidden`이 `position:relative`와 작동하지 않는 이유는 무엇입니까?
- Susan Sarandon원래의
- 2024-11-02 15:42:30155검색
IE6 및 IE7 CSS "오버플로: 숨김" 및 "위치: 상대" 문제
이 문제는 비-오버플로를 숨기려고 할 때 발생합니다. "overflow:hidden"을 사용하여 슬라이더의 활성 슬라이드. IE6 및 IE7에서 이 CSS 속성은 "위치: 상대"가 적용된 요소에 대해 작동하지 않습니다.
다음과 같은 격리된 HTML 구조를 고려하세요.
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
body {
width: 900px;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="item-list">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
</html></code>
목표는 비 항목을 숨기는 것입니다. -"item-list" div에서 "overflow:hidden"을 사용하는 활성 슬라이드. 그러나 "ul"에 적용된 "position:relative" 스타일로 인해 IE6 및 IE7에서는 이 작업이 실패합니다.
해결 방법은 문제의 요소 컨테이너에 "position:relative"를 추가하는 것입니다. 이 경우 "body"가 컨테이너이므로 바로 아래에 "div"를 추가하고 위치를 "relative"로 설정하면 문제가 해결됩니다.
위 내용은 IE6 및 IE7에서 `overflow: Hidden`이 `position:relative`와 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.