0

我的新网站在使用 Google Chrome 时遇到问题，我正在用不同的图像设计 iPhone，我遇到的问题是所有其他浏览器的代码加载正常并且 iPhone 显示正确，但是使用 Chrome 似乎出于某种原因，将图像放大到稍微模糊的程度，并且还将图像向左移动了大约 1px，从而使最终用户可以清楚地看到 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 回答