IE7과 Firefox 3 렌더링 차이

다음은 내가 개발중인 페이지의 개요입니다. IE7과 Firefox 3 렌더링 차이

<?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 : IE7 완벽하게 페이지를 렌더링하는 동안 파이어 폭스 3에서

* { 
    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%; 
}

는, (녹색 배경) 신체 DIV 거의 아무것도 찌그러된다. CSS 2.1 표준 (Meyer의 O'Reilly 서적을 통해)에서 알 수 있듯이, float div는 컨테이너 블록 내에서 플로트 3에서 분명히 나타나지 않습니다.

Firefox의 렌더링이 호환되면, 내가 빠졌어?

출처

2009-03-01 gvkv

Opera는 이것을 Firefox와 비슷하게 렌더링합니다. – strager

http://jsbin.com/eyanu – strager

문제는 IE7이 부모 요소를 지워서 부동 자식을 포함한다는 것입니다. 이것은 어떻게 렌더링되어야하는지가 아닙니다. 다른 포스터에 의한 더 나은 설명.

간단한 수정 : 당신의 #body에 overflow: hidden;을 적용

#body { 
    overflow: hidden; 
}

는 설명 this post를 참조하십시오.

출처

2009-03-01 21:37:45 strager

저는 항상 overflow : auto를 사용했습니다. 그러나 링크 된 기사에는 마지막 단락 대신 overflow : hidden을 사용하는 이유가 언급되어 있습니다. 링크를 가져 주셔서 감사합니다. –

오버플로 : 숨김; 확실히 이것을 처리하는 방법이 선호됩니다. 그것은 해킹이 아니며 CSS2 사양 에서처럼 오버 플로우가 작동해야한다고 말합니다. "절대 위치 요소, 인라인 블록, 표 셀, 표 캡션 및 '표시'이외의 '오버플로'가있는 요소 (예외 : 그 값이 뷰포트에 전달되었을 때) 새로운 블록 포맷 컨텍스트를 설정하십시오. " – Wick

Internet Explorer와 Firefox에서 페이지가 다르게 렌더링되면 Firefox는 페이지를 올바르게 렌더링합니다.

본문 div에는 높이가 없어야합니다. 그것은 플로팅 요소 만 포함하므로 어떤 높이라도 줄 수있는 요소는 없습니다. 부동 요소는 상위 요소의 크기에는 영향을주지 않습니다. IE는이 문제를 해결하고 요소를 확장하여 하위 요소를 포함합니다. 이것은 IE의 잘 알려진 렌더링 오류 중 하나입니다.

코드에서 xml 태그를 제거하십시오. Doctype이 페이지에서 먼저 나오거나 IE가이를 무시합니다.

IE 8 베타 버전에서 페이지를 볼 경우 페이지가 Firefox처럼 정확하게 렌더링됩니다.

출처

2009-03-01 21:37:14 Guffa

doctype 선언에 대한 헤드 업에 감사드립니다. – gvkv

+1 (중복 XML 어쨌든) XML 선언을 제거합니다. Internet Explorer를 혼란스럽게하고 거기에 포함시킬만한 이유가 거의 없습니다. – bobince

id = "body"인 div에 할당 된 가중치 또는 볼륨이 없습니다. div의 내부에있는 텍스트는 볼륨을주고 적절한 크기로 색상 배경을 렌더링합니다. 이 문제는 Webkit 기반 브라우저 (Chrome, Safari)에서도 재생됩니다.

body div에 텍스트를 배치하여 가중치를 주거나 overflow 스타일을 추가하십시오. hidden; id = body로 div에.

출처

2009-03-01 21:37:41 ahsteele

예, 본문 div에 더미 텍스트를 추가했을 때도 눈치 챘습니다. – gvkv

답장을 보내 주셔서 감사합니다.

내 문제도 해결하는 또 다른 해결책이 있습니다 : 부모 div (id = "body") 부동. 이것은 마이어의 책에서 직접 나온 것입니다. 그래서 나는 그것을 어떻게 놓쳤는 지 잘 모릅니다. 하고있는 또 다른 경우는 학습입니다! 다른 하나는 이것도 내가 말하지 않은 또 다른 문제를 해결합니다 : 어떻게 몸과 바닥 글 사이에 여백을 맞추는 것입니까? Firefox에서 바닥 글을 지우는 것은 여백을 사용하여 본문과 바닥 글 사이에 공간을 허용하지 않기 때문에. 그러나 부모 요소를 플로팅하는 것은 마찬가지입니다.

출처

2009-03-01 23:32:07 gvkv

답변

관련 문제