0
私は新しいウェブサイトでGoogle Chromeに問題があります。異なる画像からiPhoneを設計しています。問題は、他のすべてのブラウザでコードが正常に読み込まれていることですiPhoneは正しく表示されますが、Chromeの場合は何らかの理由で画像が少しぼやけているように見えますが、画像が左に1ピクセルほど移動して、iPhoneが別途ピース。クロム（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>
Chromeを使用して
#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;
}
CSSコード： http://img851.imageshack.us/img851/7237/iphone1q.png
Safariを使用： http://img571.imageshack.us/img571/5482/iphone2t.png
Jsfiddle：jsfiddle.net/w5a5f
Firefox & Safariは正しく表示されますが、Chromeは失敗します。それを拡大するのを止めるにはクロームCSSが必要ですか、それとも修正がありますか？
UPDATE：それが唯一のローカルファイル上で発生するので、あなたがjsfiddleでアップロードされたコードはChromeとFirefoxの両方で罰金と同じ表示である...、一度この問題が消えるサーバーにアップロード
[jsfiddle]（http://jsfiddle.net）に両方のコードを追加してください。 :) –
私は、あなたが問題を抱えているもの、画像そのものを投稿していないことに気づくことはできません。 –
http://jsfiddle.net/w5a5f/ 私は謝罪します。私はそれらを投稿しなければなりません:) –