Min-width, max-width, min-height y max-height también en IE

Estoy maquetando una web, una de las columnas tiene una imagen de fondo que siempre debe verse entera (aunque no tenga suficiente contenido), ¿como lo hago…?. Facil si la imagen mide 600px de alto agrego la propiedad min-height: 600px al elemento en cuestión y ya esta. ¿O no?

Pues si y no, ya que Internet Explorer 6 no reconoce ninguna de las propiedades que definen tanto la altura y anchura máxima y mínima, y por desgracia este navegador aun lo usa demasiada gente (e incluso algún cliente que puedas tener).

Hay 2 posibles soluciones, o bien hacemos uso de !important (solo para min-width/min-height) o de expresiones. A continuación las posibles soluciones para cada propiedad:

Min-width:

1
2
3
4
5
6

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: auto !important;
     width: 600px;
     }

1
2
3
4
5

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: expresion(document.body.clientWidth < 601? "600px": "auto");
     }

Max-width:

1
2
3
4
5

div {
     max-width: 600px;
     /* max-width para IE6 */
     width: expresion(document.body.clientWidth > 601? "600px": "auto");
     }

Min-height:

1
2
3
4
5
6

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: auto !important;
     height: 600px;
     }

1
2
3
4
5

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: expresion(this.scrollHeight < 601? "600px": "auto");
     }

Max-height:

1
2
3
4
5

div {
     max-height: 600px;
     /* max-height para IE6 */
     height: expresion(this.scrollHeight > 601? "600px": "auto");
     }

Para la altura y anchura mínima lo más cómodo es hacer uso de !important y ahorrarnos los posible problemas del uso de expresiones, en cambio para la altura y anchura máxima tendremos que tener en cuenta los inconvenientes de este método (Seguir enlace de la fuente).

Otra opción si no nos importa usar javascript es incorporar en nuestra página el ie7.js con el cual conseguiremos que IE (5 y 6) se comporten como la versión 7, pudiendo usar estas propiedades sin problemas tan solo añadiendo dentro de la etiqueta head el siguiente código:

1
2
3

<!--[if lt IE 7]>
     <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Bueno, ahora solo te queda decidir que se adapta mejor a lo que necesitas .

Fuentes: Reflections on max-width, ie7.js y LibrosWeb.