Pregunta

Cuál es el definitivo ¿Manera de imitar la propiedad CSS min-width en Internet Explorer 6?¿Es mejor no intentarlo?

¿Fue útil?

Solución

foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

(o servir una hoja de estilo separada para IE usando comentarios condicionales)

Otros consejos

Podría usar una expresión (como lo sugiere HBoss), pero si le preocupa el rendimiento, entonces la mejor manera de hacerlo es agregar una cuña dentro del elemento al que desea aplicar un ancho mínimo.

<div id="container">
  The "shim" div will hold the container div open to at least 500px!
  You should be able to put it anywhere in the container div.
  <div class="shim">&nbsp;</div>
</div>

#container .shim {
  width: 500px;
  height: 0;
  line-height: 0;
}

Esto requiere un poco de marcado no semántico, pero es una verdadera solución para varios navegadores y no requiere la sobrecarga de usar una expresión.

Este artículo en CSS Play, de Stu Nicholls, muestra los diferentes métodos para lograr un ancho mínimo en IE, en todos los modos (Quirks, etc.) e incluso para IE/Mac.

He jugueteado con cada respuesta dada aquí durante el último mes.Y después de jugar con el método de Pretaul (Ancho mínimo en MSIE 6), parece ser la mejor alternativa al ancho mínimo.Sin hacks ni nada, simplemente código CSS compatible que tarda 30 segundos en implementarse.

Al buscar en Google, las expresiones parecen ser las más populares.De todos modos, para mí tendía a bloquear mi navegador aleatoriamente (tanto IE como FF).

No sé, tuve cierto éxito con:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Una combinación del truco rápido de altura mínima de Dustin Díaz y ¿Cómo especifico en HTML o CSS el ancho mínimo absoluto de una celda de una tabla?

haz tu etiqueta css como _Width:500px o lo que sea.

Esto funciona bastante bien...

div.container {
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 
}

Hack rápido de altura mínima funciona para mí (también funciona para el ancho)

El ejemplo de corrección está bien para obligar al navegador a mostrar una barra de desplazamiento horizontal cuando el contenedor alcanza un tamaño determinado, pero notará que el contenido del contenedor seguirá cambiando de tamaño a medida que la ventana se haga más pequeña.Me imagino que este no es el objetivo general al intentar alcanzar el ancho mínimo en IE 6.

Técnica de ancho mínimo incompleta http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg

Además, el uso de expresiones y otros trucos locos de CSS simplemente no es una buena práctica.Son inseguros e impuros.Este artículo explica las advertencias de los hacks de CSS y por qué deberían evitarse por completo.

Personalmente considero que la publicación de Scaryjeff es el mejor consejo para lograr un verdadero ancho mínimo en IE6 y, como desarrollador experimentado de diseño CSS, todavía tengo que encontrar una solución mejor que sea aplicable a problemas de este tipo.

Este artículo en CSS Play, de Stu Nicholls, muestra los diferentes métodos para lograr un ancho mínimo en IE, en todos los modos (Quirks, etc.) e incluso para IE/Mac.

Proporcioné una respuesta a una pregunta similar que detalla el uso de esta técnica para lograr correctamente el ancho mínimo.Lo puedes ver aquí:

CSS:Dos columnas de fluido al 50 % que no respetan el ancho mínimo

La técnica es CSS simple y válida que se puede utilizar en casi cualquier situación.Aplicado al ejemplo de cuña anterior, da como resultado lo que considero una funcionalidad de ancho mínimo correcta.

Técnica correcta de ancho mínimo http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg

Botón de una sola línea

button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}

Utilice comentarios condicionales para hacer referencia a una hoja de estilo específica de MSIE 6, luego cree CSS como se muestra a continuación.

Los navegadores compatibles utilizarán:

min-width: 660px;

Entonces MSIE 6 utilizará:

width: expression((document.body.clientWidth < 659)? "660px" : "auto");
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top