【发布时间】：2012-04-30 23:37:44
【问题描述】：
我的新网站在使用谷歌浏览器时遇到问题，我正在用不同的图像设计 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 来阻止它放大还是有解决办法？
更新：似乎一旦上传到服务器，这个问题就会消失，所以它只发生在本地文件上......
【问题讨论】：
-
想将这两个代码添加到jsfiddle 吗？ :)
-
我不禁注意到你没有发布你有问题的东西，图片本身。
-
jsfiddle.net/w5a5f 抱歉，我会一秒钟发布它们 :)
-
@MrLister 图片上传者也在那里。
-
jsfiddle.net/w5a5f/1 这个 jsfiddle 包含所有代码和图片的正确链接 :)
标签： css image google-chrome image-size