0

Firefox や IE ではなく、Google Chrome を完全にサポートするように Web サイトを作成しました。あまりスマートではないことがわかったので、電話してください。私のウェブサイトは、Firefox ではまったく異なって見えます。

大きな違いはありませんが、多くのアイテムが数ピクセルで間違って配置されています。これはそれほど悪くはないように聞こえますが、そうです。たとえば、Chrome では次のようにページが表示されます (赤いボタンを見てください): http://d.pr/i/YNhaと、 http: //d.pr/i/8YZOでは Firefox でのページの表示方法です。ご覧のとおり、画像の位置にいくつかの違いがあります。

何が原因なのか本当にわかりません。解決策が見つからないまま、同様の問題を既に Web で検索しました。

これは、画像に使用される CSS です。

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

どんな助けでも大歓迎です。

HTML と 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>
4

1 に答える 1

-1

情報が不足しているため、これは決定的なものではありませんが、これが私の答えです。

ブラウザーは、マージン、パディング、およびその他の CSS スタイルに異なるデフォルト値を使用します。各ブラウザで同じようにサイトをレンダリングするには、リセット css を使用してみてください。ここに例があります、

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

これにより、ブラウザのデフォルトを効果的に無視して、画面上のすべての要素の値が設定されます。次に、任意のクラスとインライン スタイルがこれらを順番にオーバーライドします。

より拡張されたリセット スタイルについては、http://www.cssreset.com/をご覧ください。

于 2013-02-26T13:11:52.287 に答える