IE7 y la propiedad de celda de tabla CSS

Así que me encanta cuando mi aplicación funciona muy bien en Firefox, pero luego la abro en IE y … No, por favor intente de nuevo.

El problema que estoy teniendo es que estoy configurando una propiedad de pantalla CSS para none o table-cell con JavaScript.

Inicialmente estaba usando display: block , pero Firefox lo estaba haciendo raro sin la propiedad de table-cell .

Me encantaría hacer esto sin agregar un truco en el JavaScript para probar IE. ¿Alguna sugerencia?

Gracias.

Una buena forma de resolver esto es configurar el valor de display en '' :

  

El valor vacío hace que el estilo regrese a su valor predeterminado. Esta solución funciona en todos los principales navegadores.

He resuelto esto usando jQuery:

 $(document).ready(function(){ if ($.browser.msie && $.browser.version == 7) { $(".tablecell").wrap(""); $(".tablerow").wrap(""); $(".table").wrapInner("
"); } });

el script anterior asume que tienes divs usando estilo como:

  

Tuve el mismo problema y usé

 *float: left; 

“*” indica solo IE

Bueno, IE7 no tiene display: table(-cell/-row) por lo que tendrás que resolver algo más o hacer targeting del navegador (lo cual estoy de acuerdo, es un hack malo). Como una solución rápida (no sé lo que estás tratando de lograr, en cuanto a la apariencia), podrías intentar display: inline-block y ver cómo se ve.

Tal vez descubra una forma de display: block y resolver el problema de “Firefox renderizarlo raro” en su lugar. ¿Puedes describir exactamente lo que quieres decir con la representación extraña?

Nunca necesita Javascript para probar IE, use comentarios condicionales .

Podrías mirar la solución que estos muchachos idearon para manejar una pantalla similar a una mesa en IE.

Usar bloque en línea funciona bien para este tipo de cosas. No, IE 6 e IE 7 técnicamente no tienen display: inline-block, pero puedes replicar el comportamiento con los siguientes estilos:

 div.show-ib { display: inline-block; *zoom: 1; *display: inline; } 

La clave para esto es ‘zoom: 1’ alterna la propiedad ‘hasLayout’ en el elemento que cambia la forma en que el navegador representa un elemento de nivel de bloque. El único problema con el bloque en línea es que no puedes tener un margen de menos de 4px.

He usado CSS durante más de una década y nunca he tenido ocasión de usar display: table-cell, y las únicas veces que uso comentarios condicionales son para ocultar los efectos avanzados de IE6.

Sospecho que un enfoque diferente resolvería su problema de una manera intrínsecamente cruzada. ¿Puedes abrir una pregunta por separado que describa el efecto que intentas lograr y publicar el HTML y el CSS que funcionan actualmente en Firefox?

Un ejemplo de código para los comentarios condicionales que el usuario no tiene párpados, amablemente publicado

“[si es IE 8]” solo funciona si el navegador es IE menor que IE8 porque IE8 lo hace bien. Con los comentarios condicionales IE7 organiza los DIV muy bien horizontalmente … HTML:

   

Mi CSS

 .link { display:table-cell; vertical-align:middle; } div.container { margin: 0 auto; display:table; } .thumb { display:table-cell; float: left; text-align: center; } 

IE 8 y 9 Trabaja con CSS, al igual que Firefox. IE7 se ve ahora igual con las tags Table y TD & TR. En algunas páginas, IE 8 solo funcionaba el 20% del tiempo, así que usé [si es IE 9]

Esto también ayuda a suavizar los problemas de alineación vertical que IE7 no puede manejar.

Intenté todo y la única forma en que descubrí que todo era cross browser era usar Javascript / Jquery. Esta es una solución liviana y limpia: haga clic aquí

IE7 no es compatible con la display:inline-block; ya sea. Un aparente truco es el zoom: 1; *display: inline; zoom: 1; *display: inline; después de su CSS para display:table-cell;