IE7은 올바른 문제를 떠올리게합니다
-
10-07-2019 - |
문제
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 =>처럼 보입니다
이렇게 보이도록해야합니다 (현재 Chrome/IE8에서 작동) =>
무엇을 변경해야합니까? :)
해결책
두 요소를 떠 다니고 제거해야합니다.
<!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>
간단한 설명 :
내 영어와 그림을 용서하지만, 크로스 브라우저에서 플로트와 클리어링이 어떻게 작동하는지 간단히 간략하게 설명합니다.
요소는 왼쪽 또는 오른쪽으로 떠질 수 있습니다. 요소가 부유 한 경우 요소는 "정상"컨텐츠를 아래쪽으로 푸시하지 않습니다. 왜 -
플로트와 클리어 :
범례 : 오렌지/플로트 오른쪽, 파란색/부동
이 경우 한 줄 텍스트의 2 가지 요소가 있습니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 플로트가 있습니다. 떠 다니면 내용물을 아래쪽으로 밀어 내지 않습니다. 따라서 사용하지 않는 경우 clear:both
회색 선에서 아래 내용물은 2 개의 부동 요소 사이에 위쪽으로 쌓여 있으므로 원하는 것이 아닐 수도 있습니다.
당신이 사용할 때 clear:both
플로트 아래에서, 플로트 요소가 높이가 가장 높은 것까지 플로트 아래의 내용은 푸시됩니다. 이것은 다이어그램의 2 차 및 세 번째 섹션에 나와 있습니다.
플로트 만 :
범례 : 오렌지/플로트 오른쪽, 파란색/정상 콘텐츠, 회색 선/다음으로 나뉘어 진 줄, 빨간색 rect/bounds
청색 정규 내용은 이미 기본적으로입니다 text-align: left;
. 따라서 방향이 남아 있습니다. 브라우저 에이 줄에서 떠 다니도록 지시하기 때문에 플로트가 일반 콘텐츠 앞에 있어야합니다.
다른 조건을 실험하여 그 효과를 확인해야합니다. 플로트를 앞, 뒤에, 왼쪽으로, 왼쪽으로, 오른쪽과 왼쪽을 지우십시오.
다른 팁
모든 IE-Float-Combos에 항상 도움이됩니다. 모든 플로트 요소를 제공하십시오. display: inline;
수정 후 클리어를 시도하십시오.
div:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}