이 IE CSS 버그는 무엇입니까? (이중 수직 패딩)

(이중 여백이 아니며, 다른 사람이 더 명료하고 문서화 된 이름을 가지고 있지 않다면 지금은 이것을 double-vertical-padding 버그라고 부름)이 IE CSS 버그는 무엇입니까? (이중 수직 패딩)

모든 기발한 IE CSS 버그를 보았을 때, 나는 혼란스러운 계속되는 간단한 테스트 케이스를 만들었습니다. 아래의 페이지는 FF, Opera 등에서 잘 보이고 작동합니다. 그러나 IE 6와 IE 7는 혼란스러워 보입니다. 나는 아래에 붙여 넣을 문서를 스스로 말하게 할 것이다.

편집 : 나는 다음 URL에서이 넣어했습니다 http://jsbin.com/efele
열기 그것까지 IE에서 다시 FF에 있습니다. 비교.

제 질문은 :이 버그는 무엇입니까? (내가 이것을 어딘가에 놓친 적이 있습니까? this page에 있습니까?) 3px 조그 버그와 이중 (수평) 여백 버그 및 다른 많은 플로트 관련 버그에 익숙합니다. 하지만 ... 수직 패딩이 중복되고 있습니까? (그리고 부팅, 잘못된 장소에 넣어.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>IE bork!</title> 
<style type="text/css"> 
html, body { 
margin:0; 
padding:0; 
} 
#container { 
border:1px solid red; 
background-color:#CC99CC; 
width:800px; 
margin:0 auto; 
padding-top:100px; 
} 
#sidebar { 
float:left; 
display:inline; 
width:200px; 
border:1px solid blue; 
background-color:#00CCFF; 
} 
#content { 
float:right; 
display:inline; 
width:510px; 
border:1px solid green; 
background-color:#66CC99; 
} 
.clear { 
clear:both; 
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */ 
background-color:#CCCCCC; /* bg color here is just for debugging */ 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="sidebar">I am the sidebar</div> 
    <div id="content">I am the content</div> 
    <div class="clear"><!-- clear! --></div> 
</div> 
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p> 
</body> 
</html>

P.S., 나는 결국이에 IE를 달래하는 방법을 알아낼 않았다. 버그를 보여주기 위해 솔루션 (명시 적으로 높이를 "clear"div에 설정)을 주석 처리했습니다. 나는 단지 내가 진짜 문제/해결책을 가로 질러 비틀 거리는 데 걸렸던 나의 인생의 지난 몇 시간을 뒤로 보낼 수 있었 더라면 좋겠다고 생각한다!

감사합니다.

출처

2009-12-01 Funka

당신이 볼 수있는 솔루션을 감안할 때, hasLayout IE의 특질 것으로 보인다. 어떤 이유로 작동하지 않습니다 높이를 지정하는 경우, 보조 노트에

출처

2009-12-01 04:47:00 JasonWyatt

; 나는 지루한 것에 정착해야한다고 생각한다 !! – Funka

(명시 적으로 명확 DIV의 높이를 설정 IE의 눈에 true에 hasLayout 설정), 나는 종종 포함한 것으로 나타났습니다 zoom:1; 언제든지 IE에서 트리거 할 hasLayout이 필요합니다. IE에서 이러한 유형의 이상한 레이아웃 문제가 발생할 때마다 항상 레이아웃 새로 고침 문제인지 확인하려고합니다. (문제가 해결되지 않는 경우, 키보드에 머리를 쾅로 진행)

나는 그런 당신이 링크 된 사이트에있는 것과 같은 재미/영리한 이름을 기대했다

출처

2009-12-01 05:10:08

감사합니다. 나는 또한 두드리는 접근법을 좋아한다! – Funka

이 IE CSS 버그는 무엇입니까? (이중 수직 패딩)

답변

관련 문제