2010-02-07 3 views
1

아래 코드를 저장하여 사용해보십시오. 이 작은 HTML/CSS 스 니펫이 IE에서 예상되는 결과를 생성하지 않는 이유는 무엇입니까?

파이어 폭스 에서는 전체 브라우저 회색이지만 에서 IE은 (IE7 정확한 예정), 제대로 동작하지 않습니다.

<!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> 
<style text="text/css"> 
.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    background-color:grey; 
} 
</style> 
</head> 
<body style="font-size:62.5%;"> 

<div class="overlay"></div> 

</body> 
</html> 

답변

4

IE는 CSS 색상 이름 grey를 인식하지 못합니다. #ccc과 같은 16 진수 색상을 사용해보세요. 제대로 작동합니다. 또는 gray ('a'가 아니라 'e'가 아닌)을 사용하면 작동합니다. W3C는 gray의 대체 철자를 지원에 대해 아무 말도하지 않기 때문에이 표준을 준수하고, gray 참으로 색 이름 according to the spec for CSS3 것을

참고.

+0

+1 이것이 맞습니다. 그 사실을 결코 알지 못했습니다. 나를 때리십시오. –

0

시도 스타일의 인증 된 정의이 추가 ...

IE에
html, body { 
    height: 100%; 
} 

, body는 기본적으로 뷰포트의 전체 높이를 확장하지 않으며, 오버레이의 컨테이너 body, 그래서

편집 해주세요. 위와 같이하지 않고 작업 해 보았습니다. 본체가 정적으로 배치되어 있어야합니다. 어쨌든 John Feminella는 그것을 알아 냈습니다. 그의 대답을보십시오.

관련 문제