배경이 IE에 완전히 표시되지 않습니다.

저는 며칠 동안 나 자신에 의해 CSS를 배우려고 노력해 왔으며 모든 것이 잘 진행되고 있습니다.배경이 IE에 완전히 표시되지 않습니다.

이렇게하는 동안 문제가 발생하여 도움을 받으려합니다.

저는 3 층 레이아웃을 단순화하려고 노력 중이며, FF에서는 완벽하게 작동하지만 IE에서는 작동하지 않습니다.

CSS의는,

#wrapper { 
    padding: 5px; 
    background-color: yellow; 
    margin: 0; 
} 
#left { 
    float :left; 
    width: 195px; 
    border: 1px solid; 
} 
#right { 
    float: right; 
    width: 195px; 
    border: 1px solid; 
} 
#middle { 
    margin-left: 202px; 
    margin-right: 202px; 
    padding: 0px 3px; 
    border: 1px solid; 
}

그리고 HTML은,

<body> 
<div id="wrapper"> 
    <div id="left"> 
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed. 
    </div> 
    <div id="right"> 
    jnvfr 
    </div> 
    <div id="middle"> 
    ubrei 
    </div> 
</div> 
</body>

배경 색상은 래퍼의 끝까지 도달하지 않습니다. "overflow : hidden;"을 추가하면 FF로 제대로 작동하지만 문제는 IE에 남아 있습니다.

또한 여기에 "오버플로 : 숨김"을 추가하는 목적을 설명 할 수있는 사람이 있습니까?

도움을 주시면 감사하겠습니다. 감사합니다. .

출처

2012-07-23 Timothy Black

나를 위해 IE9에서 잘 작동하는 것 같다 : http://jsfiddle.net/bENYd/

은 IE가 쿼크 모드 또는 IE7-8 기준에 렌더링되지 않도록 당신이 당신의 HTML의 최신 DOCTYPE을 사용하고 있는지 확인하십시오.

<!DOCTYPE html>

HTML 문서의 맨 앞에해야합니다.

출처

2012-07-23 17:24:28 Trey

#wrapper의 높이는 float:left|right 또는 position:absolute|fixed이없는 가장 높은 요소의 높이에 해당합니다.
플로팅 상자는 부모 요소를 확장하지 않습니다.

클리어 픽 ~ #wrapper을 추가 할 수 있습니다.

/* For modern browsers */ 
#wrapper:before, 
#wrapper:after { 
    content:   ""; 
    display:   block; 
    overflow:   hidden; 
} 
#wrapper:after { 
    clear:    both; 
} 
/* For IE 6/7 (trigger hasLayout) */ 
#wrapper { 
    zoom:    1; 
    clear:    both; 
}

출처

2012-07-23 17:44:10 fuxia

답장을 보내 주셔서 감사 드리며, 두 브라우저에서 완벽하게 작동합니다. 여기 질문이 있는데, 괜찮 으면 좋겠다. 컨텐츠는 ""여기서 어떤 역할을합니까? 그것을 제거하면 같은 문제로 다시 걸립니다. –

빈 생성 된 콘텐츠 상자는 CSS 당 새 하위 요소를 만듭니다. 무슨 일이 일어나는지보기 위해 뭔가를 삽입하십시오 :'content : 'hello world!'예를 들면. – fuxia

시간을내어 도와 줘서 고마워. 고맙습니다. –

배경이 IE에 완전히 표시되지 않습니다.

답변

관련 문제