John Resig, der Vater von jQuery, hat einen Artikel geschrieben: „ Subpixel-Probleme in CSS “. Es gibt 4 Float-Divs mit einer Breite von jeweils 25 %. Allerdings gibt es bei verschiedenen Browsern einige Verwirrungen im Verständnis von 50*25 %. ( Demo ):
.jpg)
Dann testete Steven Wittens ‘ „ CSS Sub-pixel Background Misalignments “ den Unterschied in der Zentrierung des Hintergrundbilds des übergeordneten Elements, wenn das Element mit fester Breite horizontal zentriert war, was uns verblüffte ( Demo ):
.jpg)
Deprimierend ist, dass nicht nur der IE, sondern auch die verschiedenen Versionen der einzelnen Browser geringfügige Unterschiede aufweisen ... Glücklicherweise kommt diese Situation in der Praxis selten vor und ist nur eine relativ einfache Situation. Die typischeren Anwendungsszenarien sind: Einige Die Aktivitätsseiten von QQ-Mitgliedern haben ein sehr breites und großartiges 1280 Pixel großes Bild in der Mitte, der mittlere Bereich ist 980 Pixel in der Mitte, und da ein Großteil des Teils außer 980 Pixel mit einer Auflösung von 1024 angezeigt werden kann, wird keine horizontale Bildlaufleiste angezeigt, die größer ist als 1024 Bei größerer Auflösung wird das gesamte Bild angezeigt. Schauen wir uns eine einfache Demo an (um die Erkennung und Zusammenfassung von Problemen zu erleichtern, ist das äußere große Bild 400 Pixel breit (entsprechend den 1280 Pixeln oben), die mittleren 200 Pixel sind ausgehöhlt (entsprechend den 980 Pixeln oben) und das mittlere Bild ist 200 Pixel breit):
Klartext in Zwischenablage anzeigen und drucken?
<!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 ">
<Kopf>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Subpixel</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>
<Körper>
<div id="pg"></div>
</body>
</html>