IE7 y la propiedad de celda de tabla CSS

Question

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

El problema que tengo es que estoy configurando una propiedad de visualización CSS en none o table-cell con JavaScript.

Inicialmente estaba usando display: block , pero Firefox lo estaba haciendo extraño sin la propiedad table-cell .

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

Gracias.

Answer 1

Una buena manera de resolver esta configuración con el valor de 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 vuelva a su valor predeterminado. Esta solución funciona en todos los principales navegadores.

Answer 2

Resolví esto usando jQuery:

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

la secuencia de comandos anterior asume que tienes divs usando un estilo como:

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

Answer 3

Tuve el mismo problema y lo usé

*float: left; 

" * " indica solo IE

Answer 4

Bueno, IE7 no tiene la pantalla : tabla (-cell / -row) , por lo tanto, tendrá que averiguar algo más o hacer una orientación del navegador (lo cual, estoy de acuerdo, es un mal pirateo). Como solución rápida (no sé lo que estás tratando de lograr, en cuanto a la apariencia), puedes probar con display: inline-block y ver qué aspecto tiene.

Tal vez encuentre la manera de hacer display: block y resolver el problema de " Firefox haciéndolo extraño " ¿en lugar? ¿Puede describir exactamente lo que quiere decir con la representación extraña?

Answer 5

Nunca necesita tener Javascript para probar IE, use comentarios condicionales .

Puede buscar la solución estos tipos aparecieron con para manejar la visualización tipo tabla en IE.

Answer 6

Usar el bloque en línea funciona bien para este tipo de cosas. No, IE 6 y IE 7 técnicamente no tienen pantalla: bloque en línea, pero 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' cambia la propiedad 'hasLayout' en el elemento que cambia la forma en que el navegador procesa un elemento de nivel de bloque. El único gotcha con bloque en línea es que no puede tener un margen inferior a 4px.

Answer 7

He estado usando CSS por más de una década y nunca tuve la oportunidad de usar display: table-cell, y las únicas veces que uso comentarios condicionales son para ocultar efectos avanzados de IE6.

Sospecho que un enfoque diferente resolvería su problema de forma intrínseca a través de varios navegadores. ¿Puedes abrir una pregunta separada que describa el efecto que estás tratando de lograr y publicar el HTML y CSS que funciona actualmente en Firefox?

Answer 8

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

" [if lt IE 8] " solo funciona si el navegador es IE más bajo que IE8 porque IE8 lo hace bien. Con los comentarios condicionales, IE7 organiza los DIV muy bien horizontalmente ... 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 Trabajan con el CSS al igual que FireFox. IE7 se ve ahora igual usando Table y TD & amp; Etiquetas TR En algunas páginas, IE 8 funcionó solo el 20% del tiempo, por lo que usé [si es IE 9]

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

Answer 9

Lo intenté todo y la única forma en que encontré que todo era un navegador cruzado era usar Javascript / Jquery. Esta es una solución limpia y liviana: haga clic aquí

Answer 10

IE7 tampoco admite la visualización de : inline-block; . Un truco aparente es zoom: 1; * display: inline; después de su css para display:table-cell;