John Resig, the father of jQuery, wrote an article " Sub-Pixel Problems in CSS ". There are 4 float divs in a 50px wide div, each 25% wide. However, various browsers have some tangles in their understanding of 50*25%. ( demo ):
.jpg)
Then Steven Wittens ' " CSS Sub-pixel Background Misalignments " tested the difference in the centering of the background image of the parent element when the fixed-width element was horizontally centered, which made us dazzled ( demo ):
.jpg)
What is depressing is that not only IE, but also different versions of each browser have slight differences... Fortunately, this situation is rarely encountered in real work, and it is only a relatively simple situation. The more typical application scenarios are : Some QQ member activity pages have a very wide and magnificent 1280px large picture in the center, the middle area is 980px in the center, and as much of the part other than 980px can be displayed at 1024 resolution, no horizontal scroll bar appears, larger than 1024 If the resolution is larger, the entire image will be displayed. Let’s take a look at a simple demo (in order to facilitate the discovery and summary of problems, the outer large image is 400px wide (corresponding to the 1280px above), the middle 200px is hollowed out (corresponding to the 980px above), and the middle image is 200px wide):
view plaincopy to clipboardprint?
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sub-Pixel</title>
<style type="text/css">
body, div, p{margin:0;padding:0;}
body{text-align:center;}
button{margin:1em;padding:0 1em;}
#pg, body{background-position:center 0;background-repeat:no-repeat;}
body{background-image: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');}
</style>
</head>
<body>
<div id="pg"></div>
</body>
</html>