IE 8 overflow: hidden y max-width

Quiero mostrar texto en la tabla y quiero cortarlo cuando es más ancho que 150px, pero no quiero el ancho fijo de la celda de la tabla (si no hay texto, ancho será 0px). Todo funciona en IE9, Firefox, Chrome, Opera pero no en IE8.IE 8 overflow: hidden y max-width

Ejemplo de código en Internet Explorer 8:

enter image description here

Ejemplo de código en Chrome:

enter image description here

Aquí está el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
td, span { 
    border: 1px solid red; 
    max-width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

span { 
    border: 1px solid green; 
    display: block; 
} 
</style> 
</head> 
<body> 
<table> 
<tr> 
    <td><span>Works in Firefox, Chrome, Opera, IE 7/9 (but not in IE 8)</span></td> 
    <td>Works in Firefox, Chrome (and Opera but no dots)</td> 
    <td style="display: block">Works in Firefox, Chrome and Opera (with dots)</td> 
</tr> 
</table> 
</body> 
</html>

Es posible hacerlo sin javascript o configuración fija ¿anchura?

Fuente

2011-12-13 qavid

Francamente, si yo fuera usted, enviaría una alerta de javascript cuando alguien abra su página con IE8. No se moleste en hacer que su página sea compatible con navegadores IE con errores, es culpa de Microsoft y no suya. – ApprenticeHacker

Acerca de la primera celda, parece que no funciona en IE7. Me temo que solo funciona en IE9. –

@IntermediateHacker Según la especificación CSS 2.1, el efecto del ancho máximo en una celda de la tabla no está definido. La especificación tiene la culpa, no Microsoft. – ZippyV

Desafortunadamente IE7 e IE8 tienen soporte para la norma max-width css. Entonces, no, no podrás hacer eso de manera confiable sin javascript o anchos fijos. Si ayuda, el código que tiene es supuesto para trabajar en IE 7+.

Pero usted podría hacerlo sólo anchura fija para esos dos navegadores añadiendo una regla CSS condicional después de que las reglas que tienen por encima de:

<!--[if lte IE 8]> 
    <style> 
    td, span { 
     width: 150px; 
    } 
    </style> 
<![endif]-->

Cuando posteriormente mueve el CSS en un archivo externo, lo haría de Por supuesto que cambie a una etiqueta de enlace:

<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8.css" /> 
<![endif]-->

Como alternativa, puede detectar IE 7 y 8 con javascript y redirigir al usuario a esta página: http://www.mozilla.org/de/firefox/new/

Fuente

2011-12-13 11:47:30 Donamite

maxWidth se introdujo en Windows Internet Explorer 7. – ZippyV

Sí, eso es absolutamente correcto, voy a hacer esa corrección. Sin embargo, es extremadamente problemático en IE 7 y 8, como lo demuestra el código en esta pregunta. Yo mismo fui testigo de cómo funciona esto (en IE 7/8) en una computadora, pero no en otra. Y como lo señalaron los lorenzo-s, tampoco funcionó para él. Lo más probable es que dependa de la actualización, pero sea cual sea el motivo, es evidente que no se debe confiar en estos navegadores. – Donamite

Respuesta

Cuestiones relacionadas