jQuery 의 아버지인 John Resig는 " CSS의 하위 픽셀 문제 "라는 기사를 썼습니다. 50px 너비의 div에는 각각 25% 너비의 부동 소수점 div가 4개 있습니다. 그러나 다양한 브라우저에서는 50*25를 이해하는 데 약간의 어려움이 있습니다. %.( 데모 ):
.jpg)
그런 다음 Steven Wittens의 ' " CSS Sub-pixel Background Misalignments "는 고정 너비 요소가 수평으로 중앙에 있을 때 상위 요소의 배경 이미지 중앙에 차이가 있는지 테스트했는데, 이는 우리를 놀라게 했습니다( 데모 ).
.jpg)
실망스러운 점은 IE뿐만 아니라 각 브라우저의 버전에 따라 약간의 차이가 있다는 것입니다... 다행스럽게도 이러한 상황은 실제 작업에서는 거의 발생하지 않으며 보다 일반적인 응용 프로그램 시나리오는 다음과 같습니다. QQ 회원 활동 페이지는 중앙에 매우 넓고 웅장한 1280px의 큰 그림이 있고, 중앙 부분은 중앙이 980px이며, 980px를 제외한 대부분의 부분은 1024 해상도로 표시될 수 있으므로 가로 스크롤 막대가 나타나지 않습니다. 1024 해상도가 높을수록 전체 이미지가 표시됩니다. 간단한 데모를 살펴보겠습니다. (문제 발견 및 요약을 용이하게 하기 위해 외부 큰 이미지의 너비는 400px(위의 1280px에 해당)이고, 가운데 200px는 비어 있습니다(위의 980px에 해당). 중간 이미지의 너비는 200px입니다.)
일반 사본을 클립보드 인쇄로 보시겠습니까?
<!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>
<스타일 유형="텍스트/css">
본문, div, p{margin:0;padding:0;}
body{text-align:center;}
버튼{margin:1em;padding:0 1em;}
#pg, 본문{배경 위치:중심 0;배경 반복:반복 없음;}
body{배경-이미지:url('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{margin:0 자동;너비:200px;높이:200px;배경-이미지:url('/u/info_img/2010-03/24/1749_004.jpg');}
</style>
</head>
<본문>
<div id="pg"></div>
</body>
</html>