En busca del Píxel perdido 19.4.12

En busca del Píxel perdido

Disclaimer: nada de lo siguiente se basa en documentación oficial. Son sólo
"Solilocos de un poeta, solo y loco tras la reja"

Origen img: Guillamon¿Nos situamos?. Tienes una caja definida en porcentajes y 3 hijos en ella. 2 de ellos con una anchura del 33% y el 3º del 34%. Vas al navegador y... no sabe sumar. Tienes 1px perdido. Al padre le queda 1px sin cubrir por los hijos.
Y lo único que se te ocurre es quedarte mirando la pantalla, echar mano de la calculadora para asegurarte y... poner ojotes 0_0
Quieres asegurarte y abres otro navegador y... apareció el desaparecido px.
Y ahí te encuentras preguntándote ¿qué pasa aquí?. ¿Tiene arreglo o que venga Iker Jiménez?

Para una mejor comprensión de estos extraños fenómenos definamos px de forma coloquial como la unidad más pequeña con la que el dispositivo digital muestra la información en la pantalla.
La clave está en "la más pequeña". Esto es, es indivisible. El dispositivo no puede manejar medios px ni cualquier otra fracción del mismo.

Regresemos a nuestro misterio px perdido con el caso más sencillo:
Si tienes una caja padre con una anchura declarada o computada de un número impar de px, por ejemplo, 101px, y dos hijos en ella ocupando el 50% de él, ves que cada uno mide 50´5px.
Recuerda, el px no puede ser dividido.

Aquí es donde interviene el navegador. Depende de cómo esté programado para lidiar con estas situaciones. Si decide quitar medio píxel a un hijo y dárselo al otro o prefiere ser equitativo y dejar a los dos sin el medio.

Mira el siguiente ejemplo con distintos navegadores


<div class="ejemplo">
  <div class="uno"></div>
  <div class="dos"></div>
  <div class="tres"></div>
</div>


.ejemplo {
  height: 50px;
  width: 501px;
  background: #000;
}
.uno, .dos {
  width: 50%;
  height 100%;
  float: left;
}
.uno {background: #C3B2F5;}
.dos {background: #EAB0A2;}

Y este es el resultado según el navegador:

imagen ilustrativa del misterio del px perdido

¿Hay solucción?

Creo que a priori no hay un parche mágico. Todo dependerá de cada caso al ser una cuestión del navegador, y posíblemente también según versiones. Unas veces compensando la anchura, otras con un borde lateral compensado con margen negativo... u otras más imaginativas.

En muchas ocasiones bastará con no definir la anchura, o fijarla en auto, en el último hijo para que ocupe la totalidad del espacio disponible.

Pero lo más importante, no mandes el dossier a Iker ;-)

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.