javascript - 不同浏览器大小不同

Question

我正在制作一个简单的网站。 我默认使用 chrome 来检查我的网站，在得到我想要的结果后，我用 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 有很大不同。

我想知道一些事情: 不同的浏览器有不同的含义吗？假设一个宽度为 100 像素、高度为 200 像素的 div？

任何关于它的文章的链接都会很棒! (对不起我的英语)

Answer 1

100 像素的宽度和 200 像素的高度在所有浏览器中都是相同的。
你在那里会很安全。

请注意您正在使用 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 标记的 react 。