使用chrome图像格式问题（CSS）

我在使用我的新网站时遇到Google Chrome的问题，我正在设计一个使用不同图像的iPhone，我遇到的问题是所有其他浏览器的代码加载正常并且iPhone显示正确，但是对于Chrome来说，由于某种原因，它似乎将图像放大到稍微模糊的程度，并且它也将图像向左移动了大约1px，这让最终用户明白iPhone处于分离状态件。使用chrome图像格式问题（CSS）

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

火狐& Safari浏览器显示它正确而Chrome不，我还需要一些具体的铬CSS从扩大它阻止它还是有一个修复的呢？

UPDATE：这似乎是一次上传到这个问题消失的服务器，因此它只能发生在一个本地文件...

来源

2012-04-19 Ben Green

小心将两个代码添加到[jsfiddle]（http://jsfiddle.net）？ :) – 2012-04-19 12:46:51

我不禁注意到，你没有发布你有问题的东西，图像本身。 – 2012-04-19 12:48:34

http://jsfiddle.net/w5a5f/ 我的歉意一秒钟我会张贴:) – 2012-04-19 12:49:00

您上传的的jsfiddle的代码是罚款与Chrome和Firefox和显示相同iphone布局！我在我的系统上测试过它！

来源

2012-04-19 13:03:30 Pankaj

嗯有趣，所以你编译你的代码相同，或者你只是使用jsfiddle查看？对我来说它在jsfiddle中显示得很好，但是当我从我自己的index.html文件中查看时，它将其放大到极端比例 – 2012-04-19 13:07:43

使用Chrome： http://img851.imageshack.us/img851/7237/iphone1q.png 使用Safari： http://img571.imageshack.us/img571/5482/iphone2t.png – 2012-04-19 13:10:40

在我的系统上： Chrome：http://img35.imageshack.us/img35/348/1chrome.png Firefox：http：// img849.imageshack.us/img849/5743/2firefox.png – Pankaj 2012-04-19 13:51:59

确保您没有使用Chrome浏览器进行放大。放大时，您会看到屏幕截图显示的1像素差异。

来源

2012-04-20 06:14:09

使用chrome图像格式问题（CSS）

回答

相关问题