使用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）

回答

相關問題