¿Problemas de posicionamiento en Firefox? posición: relativa para una pantalla: elemento de la tabla

Question

Estoy experimentando el problema de posicionamiento más extraño que aparece solo en Firefox.

Mi HTML:

<article id="one" class="layer"></article> 
<article id="two" class="layer"></article> 
<article id="three" class="layer"> 
    <div class="left"></div> 
    <div class="right"></div> 
</article> 

Mi CSS:

html, body { 
    margin: 0; padding: 0; 
    height: 100%; 
    width: 100%; 
} 

article.layer { 
    position: relative; 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

article .left, article .right { 
    position:absolute; 
    width: 50%; 
    height: 100%; 
    min-height:100%; 
    display:table; 
} 

article .left { left: 0; top: 0; } 
article .right { left: 50%; top: 0; } 

Así que cada artículo se establece en display:table y 100% anchura y la altura del 100%. El cuerpo y el html también son 100% anchos y altos. Por lo tanto, cada artículo es exactamente del tamaño de la ventana del navegador actual.

Observe que cada article.layer se establece en position:relative.

El último artículo tiene dos div s en el puesto absolute por lo que uno se coloca a la izquierda y otro a la derecha.

Esto funciona bien en todos los navegadores, excepto en Firefox. En Firefox y el div.leftdiv.right del último artículo se muestran en la parte superior y las cubrirás el primer artículo ...

Aquí está una demostración en vivo: http://jsbin.com/ubulot/edit#preview prueba en Firefox y ves el problema. Tengo FF 9.0.1 instalado en mi Mac.

¿Alguna idea de lo que estoy haciendo mal aquí?

Answer 1

Si cambia display:table a display:block en todo, se muestra bien como puede ver here. ¿Hay alguna razón por la que esté usando display:table?

Answer 2

Estoy usando display: table myself. Es una solución para ciertos problemas de diseño que se muestran: el bloque no se ocupa suficientemente de. El razonamiento es extenso y no voy a entrar aquí.

Esto es una consecuencia de la especificación actual de HTML 4/5 que no define ciertos comportamientos con respecto a la "pantalla: tabla {-x};" y posicionamiento.

Del libro "Todo lo que sabe sobre la CSS es incorrecto" por Rachel Andrew & Kevin Yank:

Una práctica común cuando se trata de posicionamiento dentro de un elemento de bloque es crear un nuevo contexto de posicionamiento mediante el establecimiento la posición propiedad del elemento de bloque relativo. Esto nos permite colocar los elementos dentro del bloque, en relación con su parte superior, derecha, abajo o a la izquierda. Sin embargo, al establecer posición: relativo; en un elemento que también tiene un valor de visualización relacionado con la tabla especificado, el posicionamiento es ignorado. Este comportamiento ha sido previamente documentado por Alastair Campbell, quien señala en su artículo que el CSS 2.1 spec no es clara en lo que los navegadores deben hacer cuando un elemento se presentan como un elemento de la tabla es relativamente posicionada:

El efecto de la posición: relativa en el vector de fila-grupo, tabla-header-grupo, mesa- footer-group, table-row, table-columnngroup, table-column, table-cell y table-captionelements no está definido.

Este comportamiento es, en mi opinión, el mayor problema con el uso de tablas para maquetar CSS ...

Aparentemente Mozilla simplemente ignora cualquier intento de establecer un contexto posicionamiento usando elementos de la tabla CSS.

La misma referencia continúa con dos sugerencias:

No hay enfoque directo a solucionar este problema utilizando tablas CSS, pero podemos tomar uno de dos métodos sencillos para proporcionar un contexto posicionamiento: añadir un bloque niño posicionado elemento a la celda, o envuelva la tabla en un elemento posicionado.

No hay una solución elegante para este. Requiere una evaluación caso por caso del problema y una solución alternativa a medida. :(

En su caso puede ser que también dejar fuera de la. "Position: relative" de su clase "Capa" No tiene sentido Firefox

Desde que ha creado la clase "Capa" como. mesa, simple marca cada uno de los s en la última instancia "display: table-cell;".

por lo que su CSS se puede hacer así:

.Layer:last-of-type > div 
{ 
display: table-cell; 
/* Other formatting here. */ 
}