jQueryの父であるJohn Resig は、「 CSS のサブピクセルの問題」という記事を書きました。幅 50 ピクセルの div には 4 つの float div があり、それぞれの幅は 25% ですが、さまざまなブラウザでは 50*25 の理解に問題があります。 %. (デモ):
.jpg)
次に、 Steven Wittensの「 CSS Sub-pixel Background Misalignments 」は、固定幅要素が水平方向に中央に配置された場合の、親要素の背景画像の中央配置の違いをテストしました。これには私たちは驚かされました (デモ)。
.jpg)
残念なのは、IE だけでなく、各ブラウザのバージョンによっても若干の違いがあることです。幸いなことに、この状況は実際の作業ではめったに発生せず、比較的単純な状況にすぎません。より一般的なアプリケーション シナリオは次のとおりです。 QQ メンバーのアクティビティ ページには、中央に非常に広く壮大な 1280px の大きな画像があり、中央の領域は中央の 980px で、980px 以外の部分は 1024 の解像度で表示できるため、水平スクロール バーは表示されません。 1024 解像度が大きい場合は画像全体が表示されます。 簡単なデモを見てみましょう (問題の発見と要約を容易にするために、外側の大きな画像は幅 400 ピクセル (上の 1280 ピクセルに相当)、中央の 200 ピクセルはくり抜かれています (上の 980 ピクセルに相当)、中央の画像は幅 200 ピクセルです):
プレーンコピーをクリップボードプリントに表示しますか?
<!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 ">
<頭>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>サブピクセル</title>
<style type="text/css">
body、div、p{マージン:0;パディング:0;}
body{text-align:center;}
ボタン{マージン:1em;パディング:0 1em;}
#pg, body{背景位置:中央 0;背景リピート:リピートなし;}
body{背景画像:url('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{margin:0 auto;width:200px;height:200px;background-image:url('/u/info_img/2010-03/24/1749_004.jpg');}
</スタイル>
</head>
<本文>
<div id="pg"></div>
</body>
</html>