IE7 및 Firefox 3 렌더링 차이

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

문제

다음은 내가 개발중인 페이지의 개요입니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

그리고 CSS :

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

Firefox 3에서는 Body Div (녹색 배경을 가진)가 거의 아무것도 낭비되는 반면 IE7은 페이지를 완벽하게 렌더링합니다. CSS 2.1 표준 (Meyer 's O'Reilly 책을 통해)에 대해 알 수있는 것에서, 플로팅 된 DIV는 컨테이너 블록 안에 떠 다니며 Firefox 3의 경우에는 그렇지 않습니다.

Firefox의 렌더링이 준수되면 무엇이 누락 되었습니까?

도움이 되었습니까?

해결책

문제는 IE7이 부모 요소를 지워서 떠 다니는 아이를 포함한다는 것입니다. 이것은 그것이 렌더링되어야하는 방법이 아닙니다. 다른 포스터의 더 나은 설명.

간단한 수정 : 적용하십시오 overflow: hidden; 너의 ~에게 #body:

#body {
    overflow: hidden;
}

보다 이 게시물 설명을 위해.

다른 팁

언제나 그렇듯이 인터넷 익스플로러와 Firefox에서 페이지가 다르게 렌더링되면 Firefox는 페이지를 올바르게 렌더링합니다.

바디 div에는 높이가 없어야합니다. 그것은 떠 다니는 요소 만 포함하므로 높이를 줄 수있는 것은 없습니다. 플로팅 요소는 부모의 크기에 영향을 미치지 않습니다. 즉,이 wroing을 수행하고 요소를 확장하여 어린이를 포함합니다. 이것은 IE의 잘 알려진 렌더링 오류 중 하나입니다.

코드에서 XML 태그를 제거하십시오. DocType은 페이지에서 먼저 와야합니다. 그렇지 않으면 IE가 무시합니다.

IE 8 베타에서 페이지를 보면 Firefox와 같이 페이지를 정확하게 렌더링합니다.

id = "body"로 div에 할당 된 무게 나 볼륨이 없습니다. DIV 내부에 배치 된 텍스트는 볼륨을 제공하고 색상 배경을 적절한 크기로 렌더링합니다. 이 문제는 Out WebKit 기반 브라우저 (Chrome, Safari)에서도 재생됩니다.

몸 무게를 주거나 오버플로 스타일을 추가하기 위해 텍스트를 바디에 넣습니다. id = body가있는 div에.

답변 해 주셔서 감사합니다.

내 문제를 해결하는 또 다른 솔루션이 있습니다 : 부모 div (id = "body")를 떠 다. 이것은 Meyer의 책에서 바로 나오므로 어떻게 놓쳤는 지 잘 모르겠습니다. 또 다른 사례는 배우는 것입니다! 또 다른 것은 이것이 내가 언급하지 않은 또 다른 문제를 해결한다는 것입니다. 신체와 바닥 글 사이의 마진을 어떻게 맞출 수 있습니까? Firefox에서 바닥 글을 청소하면 신체와 바닥 글 사이의 공간을 제공하는 데 마진을 사용하지 않습니다. 그러나 부모 요소를 떠 다니는 경우가 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top