min-ancho de CSS en IE6, 7 y 8

Encontré muchas respuestas a esta pregunta en Google, pero ninguna de ellas parece funcionar para todos los navegadores.min-ancho de CSS en IE6, 7 y 8

Estoy buscando una forma de CSS para trabajar con min-width en Firefox, IE6, IE7 e IE8. Es bien sabido que IE no admite min-width, por lo que varios hacks están ahí para tratar de emular el comportamiento de min-width. Lamentablemente, no he tenido suerte con ellos.

En concreto, esto es lo que estoy tratando de hacer:

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell.</td> 
    <td>Link</td> 
    </tr> 
</table>

¿alguien tiene una manera de conseguir que esto funcione?

Fuente

2010-03-01 Aaron

'min-width' es compatible con IE> = 7 (aunque con errores en la versión 7). Ha sido compatible con Firefox por años. – Quentin

Firefox no es el problema.Es solo que necesito una solución que funcione en todos estos navegadores. Además, estoy probando 'min-width' en IE8, y no funciona para mí. – Aaron

Para todos los que respondieron, estoy trabajando en probar sus soluciones. – Aaron

Así que resulta que el truco necesario para conseguir min-width para trabajar en todos los navegadores no es tan feo como muchos lo hacen ser.

Todo lo que tenía que hacer era agregar CSS para un div dentro del largeCell y agregar un div vacío al final de la celda. El div tiene solo 1px de altura, por lo que realmente no hace que la celda parezca más grande de lo que debería ser.

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 

    table.dataTable td.largeCell div { 
     margin: 0px 0px 0px 0px; 
     height: 1px; 
     width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell. 
     <div></div> 
    </td> 
    <td>Link</td> 
    </tr> 
</table>

Fuente

2010-03-01 16:09:44 Aaron

que utilizo:

min-width: 200px; 
_width: 200px; /* IE6 */

Fuente

2010-03-01 14:50:39 fire

¿' _width' es un valor css reconocido solo por IE6? Desafortunadamente, esto no funcionó para mí. – Aaron

sí, puede usar _ cualquier cosa para declarar una propiedad de IE6, que fue en los días de los ataques de IE6, sin embargo, recomendaría que use comentarios condicionales hoy – fire

<style type="text/css"> 
.table1 th a { 
    display:inline-block; 
    width:200px"; 
} 
</style> 

<table> 
    <tr> 
     <th><a>title1</a></th> 
     <th><a>title2</a></th> 
    </tr> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
</table>

Fuente

2010-09-10 21:02:25 y34h

¿Por qué hay comillas después del ancho: 200px – 123

min-height:expression(document.body.clientHeight +'px'); 
min-width:expression(document.body.clientWidth +'px');

Fuente

2011-10-12 10:29:29

Este me falló. Siempre puedes convertirte en una guía de rafting en aguas bravas. Sin embargo, podría no tener tantas emociones como luchar contra los errores de IE. – plntxt

he he .. Eso sería un buen trabajo .. Espero poder anotar más con él ... :) Me encantó su comentario .. –

Por defecto el modo de documento en el IE será el modo no estándar

Solución: añadir el tipo de documento en la parte superior de la página html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fuente

2012-07-09 07:22:23 KingMaker

Trate de añadir:

overflow: visible

al elemento

Fuente

2012-09-17 16:38:04 dennismonsewicz

Después de tantos truco que he probado ninguno de ellos trabaja para mí para este "min-width" tema, pero finalmente me dieron su solución para IE 8.

Trate de usar esto: <!DOCTYPE html> como su tipo de DOC, este es el tipo de DOC HTML 5 que convierte su página IE8 para comportarse como el navegador mozilla o webkit.

Por lo tanto, aparte de problemas de min-width y min-height, resuelve muchos problemas de IE8 con mucha facilidad.

Si mi publicación lo ayuda, por favor envíeme su nombre que funcione.

Fuente

2012-11-26 10:40:44

Tipo de documento: –

Estaba teniendo un problema similar, necesitaba un sitio que fuera el 95% a menos que fuera menos de 980px.

Nada aquí funcionó, y en la desesperación me acerqué a la respuesta de expresión de Bill Burlington. El mencionado arriba no funcionó para mí, pero si usé una expresión más robusta, ¡sí lo hizo!

width: expression (document.body.clientWidth < 980 ? "980px" : "95%");

Esto básicamente dice que si el ancho es inferior a 980px, configure el ancho a 980px. Si es más ancho, configure el ancho al 95%.

Fuente

2013-02-05 16:15:22 NominalAeon

Respuesta

Cuestiones relacionadas