Размер в разных браузерах

Question

Я делаю простой сайт. Я использую хром по умолчанию, чтобы проверить свой сайт, и после того, как я получу результат, который я хочу, я проверяю сайт с помощью explorer и firefox. Но потом я узнал, что размер 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 файл:

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

с этим кодом я не могу видеть фоновое изображение в IE9 и размере различных объектов я могу видеть очень разный в IE9 от chrome и firefox.

Я хочу знать что-то: У разных браузеров разное значение имеет смысл, скажем, div с шириной 100 пикселей и высотой 200 пикселей?

any adivce ссылка для статьи об этом будет замечательно! (извините за мой английский)

Answer 1

Ширина 100px и высота 200px равны во всех браузерах.
Вы будете в безопасности.

Примите во внимание, что вы используете em, то есть , равный текущему размеру шрифта, не указав фактический размер шрифта. Вы оставляете эту интерпретацию для браузера.

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

Но браузеры имеют разные реализации прокладок, полей и некоторых других странностей. Несмотря на то, что большинство правил CSS поддерживаются равным перекрестным браузером, здесь есть некоторые особенности.

Вы должны попытаться проверить кросс-браузер, как вы разрабатываете, чтобы предотвратить окончательный результат «как это может быть».

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

Chrome, Firefox и Safari вы можете проверить из коробки и огромный процент пользователей уже есть последняя и самая лучшая версия. Для IE вы можете использовать IE Tester, который поможет вам увидеть, как разные версии реагируют на разные разметки CSS.