IE6 + IE7 CSS 문제 오버플로 : 숨김; -위치 : 상대; 콤보
그래서 jQuery를 사용하여 제목과 티저 텍스트가있는 일부 이미지를 슬라이드하는 홈페이지 용 슬라이더를 만들었습니다. 모든 것이 잘 작동하고 IE를 확인하기 위해 IE 6과 7이 슬라이더 CSS를 완전히 죽인다는 것을 발견했습니다. 이유를 알 수는 없지만 어떤 이유로 인해 overflow : hidden;으로 비활성 슬라이드를 숨길 수 없습니다. 나는 CSS를 앞뒤로 조정하려고 시도했지만 문제의 원인을 파악할 수 없었습니다.
좀 더 고립 된 html 페이지에서 문제를 재현했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr">
<head>
<style>
body {
width: 900px;
}
.column-1 {
width: 500px;
float: left;
}
.column-2 {
width: 200px;
float: left;
}
.column-3 {
width: 200px;
float: left;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
list-style: none;
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="column-1">
<div class="item-list clearfix">
<ul>
<li class="first">
<div class="node-slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 1</h4>
<p>Teaser 1</p>
</div>
</div>
</li>
<li>
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 2</h4>
<p>Teaser 2</p>
</div>
</div>
</li>
<li class="last">
<div class="slide">
<img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
<div class="infobox">
<h4>Title 3</h4>
<p>Teaser 3</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="column-2">
...
</div>
<div class="column-3">
...
</div>
</body>
</html>
나는 그것이
ul {
position: relative;
}
on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.
It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.
This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.
To avoid this, in this case you can replace:
ul {
left: -499px;
position: relative;
}
with:
ul {
margin-left: -499px;
}
This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.
'program story' 카테고리의 다른 글
| 백그라운드 스레드에서 NSTimer를 어떻게 생성합니까? (0) | 2020.11.19 |
|---|---|
| AngularJS에서 루트 스코프에 브로드 캐스트 이벤트를 등록 해제하려면 어떻게해야합니까? (0) | 2020.11.19 |
| UIActivityViewController에서 메일 제목을 설정하는 방법은 무엇입니까? (0) | 2020.11.19 |
| iOS UILabel에 왼쪽 패딩 추가 (0) | 2020.11.19 |
| 둘 이상의 EditText에 대한 TextWatcher (0) | 2020.11.19 |