Uno de los problemas actuales de aplicar Responsive Design es sin duda el aburrido bug casuado por el Sub-pixel en nuestro odiado Internet Explorer.
Para usar Responsive Design versiones de IE inferiores a la 9, recuerda que puedes hacerlo usando Respond.js o css3-mediaqueries-js)
¿En qué consiste? Si visitaste el enlace anterior puedes ahorrarte la siguiente explicación. Básicamente se resumen en que este problema a la hora de maquetar se da debido al redondeo que hacen los diferentes navegadores al aplicar un porcentaje a un tamaño.
Imaginemos 3 contenedores, de 49, 50 y 51 píxeles cada uno. Dentro de cada uno vamos a crear 4 columnas (usando porcentajes, es decir, width: 25%). ¿Qué tamaño en píxeles tendría cada columna?
Caso 1: 49px x 0.25 = 12.25
Caso 2: 50px x 0.25 = 12.5
Caso 3: 50px x 0.25 = 12.75
Pues aquí está el problema: Webkit (Chrome, Safari, etc…) y Opera redondean hacia abajo, dejando espacio de sobra. FireFox, IE8, y IE9, modifican el tamaño de las cajas (siendo mayor al esperado) en caso de que sobre espacio por cubrir. Y el inservible IE7 y el menos inservible IE8 para decimales superiores o iguales a .5, redondean hacia arriba, o lo que es lo mismo, para ellos, las columnas serían de 12px, 13px y 13px, haciendo saltar inevitablemente la última columna, maldición nuestra incluída.
Entonces, como ya habrás pensado, la solución es que en nuestra hoja de estilos específicos para IE, le damos menos porcentaje a esas columnas y ya. Y sí, ¿pero cuánto menos? ¿A ojo? Puede servirnos, pero la maquetación no será fiel del todo al diseño original. La solución es:
(0.5 / tamaño_del_contenedor) * 100 = 50 / tamaño_de_contenedor
Y aquí es donde llega SASS y te hace la vida fácil. Si alguien encuentra una solución mejor, el gist siguiente es público y puede ser editado a gusto del consumidor :)
Este post no habría sido posible sin el artículo de Tyler Tate.