thead - IE7 y la propiedad de celda de tabla CSS

tabla con scroll

Question

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.

Answer 1

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.

Answer 2

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?

Answer 3

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 4

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.

Answer 5

Tuve el mismo problema y usé

*float: left; 

"*" indica solo IE

Answer 6

He resuelto esto usando jQuery:

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

el script anterior asume que tienes divs usando estilo como:

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

Answer 7

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

<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 regrese a su valor predeterminado. Esta solución funciona en todos los principales navegadores.

Answer 8

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:

 <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 Trabaja con CSS, al igual que Firefox. IE7 se ve ahora igual con las etiquetas 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.

Answer 9

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í

Answer 10

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;