IE7 y la propiedad CSS de celda de tabla

Question

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

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

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

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

Gracias.

Answer 1

Una buena manera de resolver este ajuste, el valor display a '':

<script type="text/javascript"> 
<!-- 
function toggle(elemntId) { 
    if (document.getElementById(elemntId).style.display != 'none') { 
     document.getElementById(elemntId).style.display = 'none'; 
    } else { 
     document.getElementById(elemntId).style.display = ''; 
    } 
    return true; 
} 
//--> 
</script> 

El valor vacío hace que el estilo para volver de nuevo a su valor por defecto. Esta solución funciona en todos los principales navegadores.

Answer 2

Bueno, IE7 does not have display: table(-cell/-row) por lo que tendrá que averiguar algo más o hacer la orientación del navegador (que 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) puedes probar display: inline-block y ver qué aspecto tiene.

¿Quizás encuentre una manera de hacer display: block y resuelva el problema de "Firefox render it weird" en su lugar? ¿Puedes describir exactamente lo que quieres decir con la representación extraña?

Answer 3

Nunca necesita Javascript para probar IE, use conditional comments.

Puede que vea la solución these guys que se le ocurrió para manejar pantallas similares a tablas en IE.

Answer 4

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?

Answer 5

que tenían el mismo problema y se utiliza

*float: left; 

"*" indica IE sólo

Answer 6

He resuelto esto utilizando jQuery:

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

el guión anterior se supone que tiene divs con estilo como:

<style> 
.table  { display: table; } 
.tablerow { display: table-row; } 
.tablecell { display: table-cell; } 
</style> 

Answer 7

Usar el 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 se puede 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 el 'hasLayout' propiedad 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.

Answer 8

Un ejemplo de código fot los comentarios condicionales que eyelidlessness usuario, amablemente publicó

"[si lt IE 8]" sólo funciona si el navegador IE es menor que IE8 IE8 porque lo hace bien. Con los comentarios condicionales IE7 organiza los DIVs muy bien en horizontal ... HTML:

<div class="container"> 
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div class="link"><a href="en.html">English</a></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div class="link"><a href="de.html">Deutsch</a></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]></tr></table><![endif]--> 
</div> 

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 Trabajar con el CSS como lo hace Firefox. IE7 se ve ahora igual utilizando las etiquetas TR de Table y TD &. En algunas páginas, IE 8 solo funcionaba el 20% del tiempo, así que utilicé [if lt IE 9]

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

Answer 9

Intenté todo y la única forma en que encontré que todo era cross browser fue utilizar Javascript/Jquery. Esta es una solución limpia y liviana: click here

Answer 10

IE7 no admite display:inline-block; tampoco. Un truco es evidente zoom: 1; *display: inline; después de su CSS para display:table-cell;