2012-08-24 19 views
5

Tengo una tabla en la que estoy usando la propiedad de visualización de CSS para modificar el diseño. Para los navegadores de tamaño completo uso "bloque" y para los más pequeños uso "tabla-celda". Funciona muy bien en Firefox, Safari y Chrome, pero de alguna manera IE9 parece estropearlo por supuesto ... Cuando depuro la página usando Firebug y me gusta, está claro que todos los navegadores excepto IE cambian la visualización: table-cell para mostrar: bloque. Pero IE está atascado con la pantalla: bloquear aunque el archivo CSS indique claramente que debe ser una celda de tabla.Pantalla: ¿célula de tabla no funciona en IE9?

¿Existen problemas conocidos con "table-cell" en IE9 o en cualquier entorno conocido?

EDITAR: El problema no es con la celda de tabla, es con Pantalla: bloquear en una celda de la tabla.

El problema que tengo se puede encontrar aquí: http://css-tricks.com/examples/ResponsiveTables/responsive.php Abrir en Chrome/Firefox y cambiar el tamaño de la ventana del navegador - la tabla responde y cambia a un diseño estrecho. Abrir en IE9 y cambiar el tamaño: la tabla es estática y no cambia.

EDIT2: En el ejemplo anterior, la parte de respuesta está comentada para IE, porque el creador sabía que sería complicado. Sin embargo, quiero ser capaz de crear este tipo de diseño que también funciona en IE, así que tengo que hacer algún tipo de solución para que funcione.

Aquí es una jsFiddle que muestra cómo IE9 meta la pata de la mesa de respuesta cuando se incluye parte reponsive: http://jsfiddle.net/2Mt37/

+1

¿dónde está su css/código? –

+0

Estaba considerando incluir algún código, pero pensé que como esto es parte de un gran proyecto, no tendría mucho sentido incluirlo de todos modos ... – Blizwire

+0

Tienes razón. IE9 realmente arruina esto. Lo arreglé con solo unos pocos cambios, así que espero que te funcione. – Rob

Respuesta

8

he encontrado la respuesta de un viejo hilo, donde escribió @thirtydot

apliqué float: left de cosas. Funciona un poco

How can I make "display: block" work on a <td> in IE?

Como se dijo, un poco obras ... IE9 deja de prestar cosas todo loco, pero todavía hay alineación som que hacer para que se vea bien. Pero esa respuesta es suficiente, puedo arreglar el resto yo mismo ...

+0

Esto funcionó para mí, muchas gracias :) ¿Alguien podría comentar por qué el flotador dejó de funcionar en este caso? – Oly

6

La etiqueta meta X-UA-Compatible permite a los autores de páginas web para seleccionar qué versión de Internet Explorer la página debe rendirse como.

Estas son las opciones:

"IE=5" 
"IE=EmulateIE7" 
"IE=7" 
"IE=EmulateIE8" 
"IE=8" 
"IE=EmulateIE9 
"IE=9" 
"IE=edge" which tells Internet Explorer to use the highest mode available to that version of IE. 

But I recommend you to use this one: 

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 

cromo = 1 es para el capítulo de Chrome de Google, que es un navegador de código abierto plug-in. Los usuarios que tienen instalado el complemento tienen acceso a las tecnologías web abiertas de Google Chrome y al veloz motor de JavaScript cuando abren páginas en el navegador. Mejora su experiencia de navegación en Internet Explorer y le da acceso a las últimas características de HTML5, así como a las características de seguridad y rendimiento de Google Chrome.

+0

No creo que pueda usar la pieza chrome-1 ya que se basa en el uso para tener un plugin personalizado instalado. Necesito que el sitio trabaje con una instalación limpia de IE9, Chrome o Firefox. – Blizwire