IE6에서 부동 소수점 정렬 방법

Question

IE6에서 부동 소수점 및 이미지를 표시하는 데 문제가 있습니다. Opera와 Firefox에서 이러한 문제를 표시하는 데 아무런 문제가 없었습니다. 컨테이너 안에는 3 개의 div가 있습니다. 각 div에는 자체 단락과 이미지가 왼쪽 또는 오른쪽으로 떠있었습니다. 원하는 레이아웃을 얻기 위해 대부분의 단락과 이미지에 음수 여백을 설정했습니다. 여기

내가 수레를 정렬하는 방법입니다

---- 컨테이너 CSS 코드 -----

.container { 
clear:both; 
background:url(images/content_bg.png) repeat-x scroll 0 0 transparent; 
width:850px; 
height:750px; 
overflow:hidden; 
margin:0 auto; 
} 

----- 처음 DIV를위한 CSS 코드 - --- 제 2 사업부 -------------

.ro2 { 
float:left; 
width:790px; 
height:234px; 
margin:-185px 0 0 28px; 
position:relative; 
} 

.row2 p { 
float:right; 
font-size:12px; 
font-weight:bold; 
text-align:justify; 
text-indent:20px; 
margin:-195px 258px 0 175px; 
position:relative; 
} 

.pic2 { 
float:left; 
} 

에 대한

.row1 { 
float:left; 
width:790px; 
height:460px; 
margin:5px 0 0 40px; 
} 

.pic1 { 
float:right; 
height:460px; 
width:382px; 
margin:-100px -50px 0 -60px; 
} 

h2, p { 
font-family:Arial, Helvetica, sans-serif; 
} 

.row1 p { 
font-size:12px; 
text-indent:20px; 
font-weight:bold; 
text-align:justify; 
margin:-10px -25px 0 0; 
position:relative; 
} 

----------- 코드 3 DIV ---------------

.row3 { 
float:left; 
width:790px; 
height:203px; 
margin:-10px 0 0 40px; 
position:relative; 
} 


.row3 p { 
float:left; 
font-size:12px; 
font-weight:bold; 
text-indent:20px; 
text-align:justify; 
margin:-180px 265px 0 10px; 
position:relative; 
} 

.pic3 { 
float:right; 
} 

div의 '높이 (.row1 .row3 할) 수 있습니다에 대한 6,

--------- 코드 div가 단락과 그림을 모두 포함 할 수 있도록 이미지의 높이를 기반으로합니다. 이 단락은 IE6에서 볼 때 이미지에서 멀리 떨어져있는 것처럼 보입니다. 일부 단락은 다른 이미지와 중첩되어 있습니다. 이 지원되는 많은 "버그"를 포함 아니에요

Answer 1

IE6 ... 당신이 ... 위의 IE7을 위해 개발되어야 당신의 CSS에 대한

: 당신이 위치를 사용하고

: 상대; 하지만 좌표를 설정하지 않으면, IE6은 그것을 좋아하지 않습니다, 그것을 제거하십시오!

클래스가 모두 적용되는 곳을 표시하지 않고 일부 HTML 태그가 여백과 잘 어울리지 않는다면 대신 여백을 사용해보십시오.

당신이 IE6에서 잘 작동하기위한 좋은 방법은 대신 사업부의 테이블을 사용하는 것입니다,하지만 사업부는 다음과 같이 잘 작동합니다 : 당신이 IE6 위해 할 것을 설명하기 위해

<div class="container" style="width:800px;"> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

</div> 

이것은, 예입니다

Answer 2

IE6 마진 이중 실제 값을 만드는 수레에 영향을 미치는 버그가 있습니다 ...

는 희망이 도움이 ... 사업부 내부의 텍스트와 이미지를 포장하고 사업부가 떠있는 것입니다. 나는 이것이 여백이 설정되어있는 것을보고 문제가 될 것이라고 말했고 "단락은 IE6에서 볼 때 이미지와 멀리 떨어져있는 것처럼 보입니다. 일부 단락은 다른 이미지와 겹치고 있습니다."

감사하게도,이 문제를 쉽게 해결할 수 있습니다. 언제든지 float을 설정하고 'display : inline'도 설정하십시오. 다른 브라우저에 영향을주지 않으면 IE 6이 여백을 두 배로 늘리지 않게됩니다.

positioniseverything's article on this을 참조하십시오. IE6에서 예제를 이해하기 위해서는 페이지를 봐야합니다.