0

新しいウェブサイトで Google Chrome に問題があります。さまざまな画像から iPhone を設計しています。問題は、他のすべてのブラウザでコードが正常に読み込まれ、iPhone が正しく表示されることですが、Chrome では何らかの理由で、画像が少しぼやけているところまで拡大し、画像を約 1 ピクセル左に移動して、エンド ユーザーに iPhone がバラバラになっていることを明らかにしました。

HTML コード

<!-- Copyright 2012 Ben Green -->
<!-- v1.1a Just iStuff -->
<!-- Not to be reproduced without permission -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just iStuff</title>
</head>

<body>
<div id="layout">
    <div id="iphone-holder">
        <div id="iphone-top">
        </div>
        <div id="iphone-left">
        </div>
        <div id="iphone-content">            
            <div id="home-top-alternate2">
            </div>
            <div id="button-top">
            </div>
            <div id="button-left">
            </div>
            <div id="icon-row-holder">

                    </div> <!-- icon row holder -->
                </div>
            <div id="button-right">
            </div>
        <div id="iphone-right">
        </div>
        <div id="iphone-bottom">
        </div>
        </div>
</div>
</body>
</html>

CSSコード

    #iphone-top {
    width:461px;
    height:123px;
    float: left;
    background-image: url(images/iphonetop.png);
}

#iphone-left {
    width:94px;
    height:413px;
    float: left;
    background-image: url(images/iphoneleft.png);
}

#iphone-content {
    width: 274px;
    height: 413px;
    float: left;
    background: url(images/wallpaper.png) no-repeat;
}

#iphone-right {
    width: 93px;
    height:413px;
    float: left;
    background: url(images/iphoneright.png) no-repeat;
}

#iphone-bottom {
    width:461px;
    height:225px;
    background-image: url(images/iphonebottom.png);
    float: left;
}

#iphone-holder {
    width: 461px;
    margin-right: auto;
    margin-left: auto;
}

http://jsfiddle.net/w5a5f


Chrome の使用: http://img851.imageshack.us/img851/7237/iphone1q.png
Safari の使用: http://img571.imageshack.us/img571/5482/iphone2t.png
Jsfiddle: jsfiddle.net/w5a5f

Firefox と Safari では正しく表示されますが、Chrome では表示されません。特定の chrome CSS を使用して拡大しないようにする必要がありますか、それとも修正方法はありますか?

更新: サーバーにアップロードされると、この問題は解消されるように思われるため、ローカル ファイルでのみ発生します...

4

2 に答える 2

0

jsfiddleでアップロードしたコードは、ChromeとFirefoxの両方で問題なく、同じiphoneレイアウトを表示します。私は自分のシステムでそれをテストしました！

于 2012-04-19T13:03:30.083 に答える
0

Chrome でズームインしていないことを確認してください。ズームインすると、スクリーンショットが示すように 1 ピクセルの違いが得られます。

于 2012-04-20T06:14:09.023 に答える