IE7은 올바른 문제를 떠올리게합니다

StackOverflow https://stackoverflow.com/questions/1820007

문제

html =>

<!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>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

IE7에 문제가 있습니다 (IE6 지원이 필요하지 않음)

IE7에서 렌더링 된 HTML은 this =>처럼 보입니다
alt text

이렇게 보이도록해야합니다 (현재 Chrome/IE8에서 작동) =>
alt text

무엇을 변경해야합니까? :)

도움이 되었습니까?

해결책

두 요소를 떠 다니고 제거해야합니다.

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

또는 플로팅 요소를 다음과 같이 정상적인 요소 앞에 놓으십시오.

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

간단한 설명 :

내 영어와 그림을 용서하지만, 크로스 브라우저에서 플로트와 클리어링이 어떻게 작동하는지 간단히 간략하게 설명합니다.

요소는 왼쪽 또는 오른쪽으로 떠질 수 있습니다. 요소가 부유 한 경우 요소는 "정상"컨텐츠를 아래쪽으로 푸시하지 않습니다. 왜 -

플로트와 클리어 :

alt text
범례 : 오렌지/플로트 오른쪽, 파란색/부동

이 경우 한 줄 텍스트의 2 가지 요소가 있습니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 플로트가 있습니다. 떠 다니면 내용물을 아래쪽으로 밀어 내지 않습니다. 따라서 사용하지 않는 경우 clear:both 회색 선에서 아래 내용물은 2 개의 부동 요소 사이에 위쪽으로 쌓여 있으므로 원하는 것이 아닐 수도 있습니다.

당신이 사용할 때 clear:both 플로트 아래에서, 플로트 요소가 높이가 가장 높은 것까지 플로트 아래의 내용은 푸시됩니다. 이것은 다이어그램의 2 차 및 세 번째 섹션에 나와 있습니다.

플로트 만 :

alt text
범례 : 오렌지/플로트 오른쪽, 파란색/정상 콘텐츠, 회색 선/다음으로 나뉘어 진 줄, 빨간색 rect/bounds

청색 정규 내용은 이미 기본적으로입니다 text-align: left;. 따라서 방향이 남아 있습니다. 브라우저 에이 줄에서 떠 다니도록 지시하기 때문에 플로트가 일반 콘텐츠 앞에 있어야합니다.

다른 조건을 실험하여 그 효과를 확인해야합니다. 플로트를 앞, 뒤에, 왼쪽으로, 왼쪽으로, 오른쪽과 왼쪽을 지우십시오.

다른 팁

모든 IE-Float-Combos에 항상 도움이됩니다. 모든 플로트 요소를 제공하십시오. display: inline;

수정 후 클리어를 시도하십시오.

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top