我的新网站在使用 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;
}
使用 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 来阻止它放大，或者是否有解决此问题的方法？
更新：似乎一旦上传到服务器，这个问题就会消失，所以它只发生在本地文件上......