大小在不同的浏览器中不同

size different in different browsers

本文关键字：浏览器      更新时间：2023-09-26

我正在做一个简单的网站。我使用chrome作为默认检查我的网站，在我得到我想要的结果后，我用浏览器和火狐检查网站，但后来我发现，一个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有很大的不同。

我想知道一些事情:是否不同的浏览器有不同的含义，比如一个宽度为100px，高度为200px的div ?

任何建议，链接到一篇关于它的文章将是伟大的!(抱歉我的英文不好)

100px宽和200px高在所有浏览器中是相等的
你在那里会很安全的。

一定要考虑到您正在使用em，即等于当前的font-size，而不指定实际的font-size。你把这个解释留给了浏览器。

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

但是浏览器确实有不同的填充、边距和其他一些奇怪的实现。尽管大多数CSS规则都支持跨浏览器的平等，但还是有一些特殊之处。

你应该在开发过程中尝试跨浏览器测试，以防止出现"这怎么可能"的最终结果。

看一下Quirksmode.org总是一个救星。

Chrome, Firefox和Safari你可以测试开箱即用，很大一部分用户已经有了最新最好的版本。对于IE，你可以使用IE Tester，它将帮助你了解不同版本对不同CSS标记的反应。

相关文章：