google-chrome - image rendering w3schools

Representación de HTML en Firefox y Chrome

Question

<div style="float: left;
            height: 20%;
            width: 70%;"</div>
<div style="float: right;
            height: 20%;
            width: 30%;">         </div>

En Chrome, las dos divisiones están en la misma línea. Pero hay una pequeña brecha entre los dos divs. Pero en Firefox no hay brecha. ¿Por qué está pasando esto? ¿Alguna solución para esto?

Answer 1

Chrome redondea todos los anchos a píxeles enteros. A menos que el ancho de su contenedor sea divisible por 10, esto significa que el ancho del flotador se redondeará, por lo que en realidad no son el 30 y el 70 por ciento, y como resultado puede haber espacio entre ellos.

Gecko hace cálculos de diseño en píxeles fraccionarios, por lo que puede representar los anchos mucho más exactamente, y ajustarse a la cuadrícula de píxeles en tiempo de pintura, evitando este tipo de costura.

Sus posibles soluciones son asegurarse de que su contenedor tenga un ancho que sea múltiplo de 10px y quejarse al equipo de WebKit sobre el comportamiento de píxeles redondos a enteros. O ambos.