Question

我正在制作一个简单的网站。我使用chrome默认检查我的网站，在我得到我想要的结果后，我用资源管理器和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非常不同。

我想知道一些事情：不同的浏览器有不同的含义，比方说宽度为100px，高度为200px的div？

任何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标记的反应。

不同浏览器的大小不同

1 个答案: