John Resig, o pai do jQuery, escreveu um artigo " Problemas de subpixel em CSS ". Existem 4 divs flutuantes em uma div de 50px de largura, cada uma com 25% de largura. %. ( demonstração ):
.jpg)
Em seguida, " CSS Sub-pixel Background Misalignments " de Steven Wittens testou a diferença na centralização da imagem de fundo do elemento pai quando o elemento de largura fixa era centralizado horizontalmente, o que nos deixou deslumbrados ( demo ):
.jpg)
O que é deprimente é que não apenas o IE, mas também diferentes versões de cada navegador apresentam pequenas diferenças... Felizmente, esta situação raramente é encontrada no trabalho real e é apenas uma situação relativamente simples. Os cenários de aplicação mais típicos são: Alguns cenários de aplicação mais típicos. As páginas de atividades dos membros do QQ têm uma imagem grande de 1280px muito ampla e magnífica no centro, a área do meio é de 980px no centro e, como grande parte da parte diferente de 980px pode ser exibida com resolução de 1024, nenhuma barra de rolagem horizontal aparece, maior que 1024 Se a resolução for maior, a imagem inteira será exibida. Vamos dar uma olhada em uma demonstração simples (para facilitar a descoberta e resumo dos problemas, a imagem externa grande tem 400px de largura (correspondendo aos 1280px acima), os 200px do meio são vazados (correspondendo aos 980px acima) e a imagem do meio tem 200px de largura):
visualizar cópia simples para impressão da área de transferência?
<!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 ">
<cabeça>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Subpixel</title>
<style type="texto/css">
corpo, div, p{margem:0;preenchimento:0;}
corpo{text-align:center;}
botão{margem:1em;preenchimento:0 1em;}
#pg, corpo{posição de fundo:centro 0;repetição de fundo:sem repetição;}
corpo{imagem de fundo:url('/u/info_img/2010-03/24/1749_003.jpg');}
#pg{margem:0 automático;largura:200px;altura:200px;imagem de fundo:url('/u/info_img/2010-03/24/1749_004.jpg');}
</estilo>
</head>
<corpo>
<div id="pg"></div>
</body>
</html>