Navegadores não renderizam linhas com menos de 1px

[marcelo2605 10]

Uma constatação que fiz hoje: por mais que seja possível determinar no css que uma linha tenha menos que 1px, os navegadores não são capazes de renderizá-la corretamente.

 

Fiz o seguinte teste: uma div com uma linha de 0.5px em cima uma de 1px embaixo.

 

.box{
border-top:solid 0.5px #000;
border-bottom:solid 1px #000;
width:200px;
height:25px;
position:absolute;
left:300px;
top:300px;
}

 

Resultado:

 

Chrome/Safari: em zoom 100%, a linha de cima fica invisível. Se aumentar o zoom, ela pode ser vista e está mais fina que a linha de baixo.

 

Firefox: em zoom 100%, as duas linhas podem ser vistas, mas têm praticamente a mesma espessura. Ou seja: ele desconsidera o valor abaixo de 1px. Se aumentar o zoom, pode se perceber a difrença de espessura.

 

Explorer 9: em zoom 100%, a linha de cima perde um pouco da nitidez, apresentando uma linha em um tom mais claro sobre a linha principal. Se aumentar o zoom, pode se perceber a difrença de espessura.

 

Explorer 8 (via IE Tester): em zoom 100%, as duas linhas têm a mesma espessura.

 

Opera: com o sem zoom, a linha de cima fica invisível.

[André do Vale 76]

Se pensar de maneira lógica, o Opera é o que apresenta o comportamento correto. Se você pensar que o menor ponto de referência (renderização) em um display é 1PX, algo menor que isso é nulo. Daí só dependerá de como o browser irá arredondar/interpretar esse valor. :thumbsup:

[marcelo2605 10]

André, concordo com você. E complemento: o pior resultado é o do IE 9, que mostrou uma linha distorcida.