2009-04-27 8 views
3

페이지의 반대쪽으로 두 개의 div가 생기고 그 사이에 텍스트가 흐르게됩니다. 두 번째 (왼쪽 정렬) div의 맨 위는 첫 번째 (오른쪽 정렬 된) div의 맨 아래에 있어야합니다. 아래 코드는 FF, Chrome, Opera 등에서 잘 작동하지만 IE에서는 제대로 지워지지 않습니다. 두 div가 모두 텍스트 맨 위에 나타납니다.IE가 후속 수레를 지우지 않음

왼쪽 정렬 된 div를 텍스트 내에서 충분히 낮게 이동하면 IE에서 제대로 작동하지만 실제로는 지속 가능한 솔루션이 아닙니다.

IE CSS 부동 소수점 버그에서 여러 페이지를 찾았지만 직접적으로 아무 것도 발견하지 못했습니다.

CSS

div { 
    width: 200px; 
    margin-top: 10px; 
    border-style: solid; 
    border-width: 1px; 
    position: relative; 
} 
.wrapper { 
    width: 600px; 
    border-color: #FF0000; 
} 
.right { 
    float: right; 
    border-color: #00FF00; 
} 
.left { 
    float: left; 
    clear: both; 
    border-color: #0000FF; 
} 

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<link rel="stylesheet" href="float.css" /> 
</head> 
<body> 
<div class="wrapper"> 
    <div class="right"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Nulla pretium tempor leo. Vivamus mi risus, dapibus ac, 
     consectetur quis, pellentesque eget, sem. 
    </div> 
    <div class="left"> 
      Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan 
      turpis tristique consequat. Sed lacinia ligula at nibh. 
      Morbi in quam. Morbi commodo nibh. 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nulla pretium tempor leo. Vivamus mi risus, 
    dapibus ac, consectetur quis, pellentesque eget, sem. 
    Maecenas est dui, imperdiet nec, fermentum ut, 
    pretium a, orci. Quisque hendrerit interdum orci. 
    Nulla sit amet risus non enim ultrices bibendum. 
    Aenean arcu purus, rhoncus at, vestibulum vel, 
    volutpat et, nunc. Integer eget risus eget purus viverra 
    congue.</p> 
    <p>Nullam vel libero ut purus semper ullamcorper. 
    Pellentesque mattis tincidunt odio. Nullam pulvinar 
    orci at dolor. Sed volutpat eros ac elit. 
    Praesent porttitor libero sed felis. Vivamus lobortis 
    pellentesque diam. 
    Proin laoreet massa ac metus. Integer faucibus lorem 
    molestie nibh. Integer id massa. Integer ligula ipsum, 
    pellentesque id, interdum at, pretium eget, orci. 
    Proin malesuada. Ut vel lorem.</p> 
</div> 
</body> 
</html> 
+0

질문은 무엇입니까? 그것은 확실히 버그이며 IE8에서 수정되었지만 IE의 버그는 새로운 것이 아닙니다. IE7에서 작동 시키거나 버그인지 확인하고 싶습니까? –

+0

예, IE6/7에서 작동 시키려고합니다. – dkuchler

+0

사용중인 IE의 버전을 알려주십시오. – thejartender

답변

6

IE7과 IE6은이 float과 그들에 clear 모두 가지고 요소가 variety of problems. IE7에서 float이있는 요소에 clear을 사용하면 같은 부동 소수점 플로트 만 지워집니다.

수정 된 easyclearing 수정 버전은 트릭을 수행 할 수 있지만 희망을 얻지는 못합니다. 자세한 내용은이 페이지를 참조하십시오 : New clearing method needed for IE7?. 나는 상당히 해요 등

+0

이것은 꽤 바른 길에 나를 놓았습니다. 나는 왼쪽 상자 위에 떠있을 수있는 1 픽셀 너비의 보이지 않는 div에 정착해야했습니다. 그러면 높이를 설정할 수있는 1 픽셀 div 아래로 내려갑니다. 솔루션에 대한 감동은 없지만 다른 대안은 IE6에서 도움이되지 않았습니다. – dkuchler

0

을 텍스트에 사업부를 아래로 이동 단락에있는 div 내장 :

결론은 당신이 아마이 부정 행위없이 IE6/7에서 작동하도록하지 않을 것이다 이것은 순수 CSS 솔루션을 가지고 있지 않은 ie6의 드문 버그 중 하나입니다.

IE7의 자바 스크립트를 사용해보십시오 - 당신을 위해 문제를 해결할 수 있습니다 : http://code.google.com/p/ie7-js/

관련 문제