2011-12-14 3 views
1

나는 간단한 웹 사이트를 만들고 있습니다. 나는 내 사이트를 확인하기 위해 크롬을 기본으로 사용하고 있으며 원하는 결과를 얻은 후에 탐색기와 파이어 폭스로 사이트를 확인하지만 div의 크기와 위치가 동일하지는 않습니다. 다른 브라우저 (IE9에서).다른 브라우저에서 크기가 다릅니다.

CSS 파일 :

body 
{ 
    height:1000px; 
    width:inherit; 

background-image: url('תמונות/BackGroundBig.jpg'); /* fallback */ 
background-image: url('תמונות/BackGroundBig.jpg'), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ 
background-image: url('תמונות/BackGroundBig.jpg'), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */ 
background-image: url('תמונות/BackGroundBig.jpg'), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */ 
background-image: url('תמונות/BackGroundBig.jpg'), -ms-linear-gradient(top, #444444, #00000); /* IE10 */ 
background-image: url('תמונות/BackGroundBig.jpg'), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */ 
background-image: url('תמונות/BackGroundBig.jpg'), linear-gradient(top, #444444, #999999); /* W3C */ 

} 

#Header 
{ 
    width:inherit; 
    height:225px; 
    border:1px solid red; 
} 
#Header img 
{ 

    position:absolute; 
    left:20.4em; 
} 

html 파일 : 나는 IE9에서 배경 이미지와 내가 볼 수있는 개체의 다른 크기를 볼 수없는이 코드

<div id="Header"> 
    <div class="headerDiv"></div> 
    <img id="headerLogo" src="../תמונות/HeaderLOGO2.jpg" alt="" /> 
    <div class="headerDiv"></div> 
</div> 

는 매우 다르다 크롬과 파이어 폭스에서 IE9에서.

나는 뭔가를 알고 싶습니다. 다른 브라우저는 다른 의미가 있습니까, 100px 너비와 200px 높이로 div라고 할 수 있습니까?

어떤 인공물에 대한 링크도 멋질 것입니다! (내 영어로 죄송합니다)

+0

어떤 doctype을 사용하고 있습니까? –

+0

의미합니까? ? – samy

+1

과도기 doctype은 브라우저 사이의 크기 차이를 발생시키는 상자 모델 문제를 일으킬 수 있습니다. 엄격한 doctype을 사용하는 것을 고려하십시오 -' ' –

답변

1

모든 브라우저에서 가로 및 세로 크기는 100px입니다.
안전 할 것입니다.

em 즉 실제 글꼴 크기를 지정하지 않고과 동일한 을 사용하고 있다는 것을 고려해야합니다. 브라우저에 대한 해석은 그대로두고 있습니다.

body { 
    font-size: 10px; /* this will make em cross-behave */ 
} 

그러나 브라우저에는 여백, 여백 및 기타 기이함의 구현이 다릅니다. 대부분의 CSS 규칙이 동등한 크로스 브라우저를 지원하지만 여기 저기에 몇 가지 특성이 있습니다.

"어떻게 할 수 있습니까?"최종 결과를 방지하기 위해 개발할 때 교차 브라우저를 테스트해야합니다. 크롬, 파이어 폭스와 사파리 당신이 상자와 사용자의 거대한 비율의 테스트 할 수

Taking a look at Quirksmode.org is always a life-saver.

이미 최신 버전을 유지할 수. IE의 경우 IE Tester을 사용하면 다른 CSS 마크 업과 다른 버전의 반응을 확인할 수 있습니다.

+0

변경 사항을 나열하는 문서가 있습니까? – samy

+1

@samy, 거기에 quirksmode.org를 추가 한 편집을 살펴보십시오. – Frankie

+0

, 감사합니다. – samy

관련 문제