Question

我已经让我的网站完全支持谷歌Chrome而不是Firefox或IE。打电话给我，因为我发现这不是很聪明：我的网站在Firefox上看起来完全不同。

没有太大差异，但很多项目都放错了几个像素。这听起来不是那么糟糕，但确实如此。例如，这就是Chrome显示页面的方式（查看红色按钮）：http://d.pr/i/YNha而且：http://d.pr/i/8YZO是Firefox显示页面的方式。如您所见，图像的位置存在一些差异。

我真的不知道是什么导致这种情况，我已经在网上搜索了类似的问题而没有找到任何解决方案。

这是用于图像的CSS：

.img (
margin-top: -130px;
margin-left: 520px;
}

任何帮助都将不胜感激。

更新 HTML＆amp; CSS：

    <div style="background-image: url(http://linehotel.org/c_images/veiling_item.png);                    height: 401px; border-radius: 10px;">

    <div style="color: white; padding: 12px;">
    <center><img src="/c_images/veiling_teas.gif" /></center>

    <img src="/c_images/bod_teas.gif" /><br>
    <h1>
    <div style="z-index:1;width: 64px; height: 96px; float: left; margin-top: -25px; background: url(http://habbo.it/habbo-imaging/avatarimage?figure=sh-295-85.hr-802-31.ch-3015-82.hd-180-2.lg-275-92&amp;gesture=sml&amp;size=b&amp;img_format=gif);"></div>
    Xice:                <br>0 credits</h1>
    <a href="/bied-mee"><img src="/c_images/closed.png" style="margin-top: -130px; margin-left: 520px;" /></a>
    </div>
    </div>
    <meta http-equiv="refresh" content="5;URL='/veiling'">
    <center><font size="1px"><i>De pagina update in real-time. Je hoeft zelf niet de pagina te herladen.</font></i></center>

Answer 1

由于缺乏信息，这不是确定的，但这是我的答案。

浏览器对边距，填充和其他css样式使用不同的默认值。为了帮助您的网站在每个浏览器中呈现相同的内容，您可以尝试使用reset css。这是一个例子，

* {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-family: "Trebuchet MS"
}

这将设置屏幕上每个元素的值，有效地忽略任何浏览器默认值。然后任何类和内联样式依次覆盖这些。

有关更多扩展重置样式，请查看http://www.cssreset.com/

与浏览器显示的差异

1 个答案: