IE bugs: corregir el problema de la scrollbar vertical con overflow: auto

En la blogosfera se desarrolla un intenso debate sobre los bugs de IE (versiones incluida la 7) y cómo solucionarlos.

Uno de ellos bastante conocido es que la aparición de un scroll vertical cuando el código fuerza un scroll horizontal. Esto se produce porque IE añade el scroll horizontal dentro del espacio de la capa en cuestión, lo que provoca que la altura disponible para el contenido se reduzca y en consecuencia sea necesario un scroll vertical. El resto de los navegadores añaden el scroll horizontal aumentando la altura, por lo que no se produce este efecto.

Yo me he visto involucrado con este bug al utilizar el preformateo (etiqueta pre) en aquellas en las que muestro código fuente (y que tienen que aparecer con una correcta indentación). Cuando el contenido de estas capas se desborda se fastidia el layout de la página por lo que hay que hacer que aparezca el scroll horizontal utilizando un overflow:auto;.

Según mi experiencia y tras varias lecturas de blogs el único que me ha funcionado y que me parece más consistente (los hacks suelen funcionan en condiciones más concretas y pueden dejar de hacerlo ya que incluso una misma versión de navegador va cambiando) es el que describe Josh Stodola en su blog y que consiste en incluir código que solo puedan leer los IE6 e IE7 mediante comentarios condicionales (exclusivo de los navegadores Internet Explorer) y que (en este caso) corregirán el overflow:auto; previamente aplicado a la etiqueta pre:

<!--[if IE]>
<style type="text/css">
pre {
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:15px;
}
</style>
<![endif]-->

Dicho código corregirá el problema en los IE7 ya que, por una parte las etiquetas overflow-x y overflow-y sólo las utiliza IE, y por otra añadimos un padding para dar el espacio que IE quita al añadir el scroll vertical. Obsérvese que nada es perfecto ya que ahora en las capas que no desbordan (y que por lo tanto no necesitan scroll horizontal, hay un padding inferior excesivo.

Y en consecuencia después de estas experiencia concluí que lo mejor para corregir bugs del IE con respecto otros navegadores es, en vez de utilizar selectores y trozos de código extraño que sólo leen unas versiones o unos navegadores y otros no, directamente utilizar comentarios condicionales para IE.

El maestro Quirksmode también habla de los comentarios condicionales como la mejor forma de hackear bugs.

En Positioniseverithing también tratan las diferentes formas de hackear IE.