li con {display: table-cell; position: relative;} con div con posición absoluta dentro comporta de manera diferente en (FF4, WebKit) vs (Opera, IE9)

Aquí es un caso de prueba completo:li con {display: table-cell; position: relative;} con div con posición absoluta dentro comporta de manera diferente en (FF4, WebKit) vs (Opera, IE9)

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 

    <style type="text/css"> 

    html, body, ul, li, div, span { 
     padding: 0; 
     margin: 0; 
    } 

    ul.container { 
     display: table; 
     list-style-type: none; 
     margin-right: 24px; 
     position: relative; 
    } 

    ul.container li { 
     display: table-cell; 
     position: relative; 
    } 

    ul.container div, ul.container span { 
     border: 1px dotted #000; 
    } 

    ul.container div { 
     width: 40px; 
     height: 40px; 
     position: absolute; 
     left: 0; 
     top: 40px; 
     background-color: #008000; 
    } 

    ul.container span { 
     display: block; 
     width: 40px; 
     height: 40px; 
     background-color: #9acd32; 
    } 

    </style> 
</head> 
<body> 

<ul class="container"> 
    <li> 
    <span>Alice</span> 
    <div>Alice</div> 
    </li> 
    <li> 
    <span>Bob</span> 
    <div>Bob</div> 
    </li> 
</ul> 

</body> 
</html>

posicionado absolutamente div tiene li como offsetParent en IE9 y Opera, mientras que WebKit y Firefox establecen offsetParent en body.

IE9, Opera

result in IE9 and Opera

Firefox 4, WebKit

result in Firefox 4 and WebKit

Mi pregunta es: ¿cuál es el comportamiento correcto?

Fuente

2011-05-12 yatskevich

Ésta parece ser datos tabulares. ¿Por qué no usar una etiqueta de tabla jugosa? – gutierrezalex

Coincidencia. No es un dato tabular;) – yatskevich

Porque ul.container div tiene position: absolute;left: 0; Creo que Firefox y Webkit tienen el comportamiento correcto. No sé lo que necesita para alcanzar, si el aspecto de IE9 y Opera es la correcta, entonces le sugiero que para quitar position: absolute;left: 0;

Ejemplo:http://jsfiddle.net/6yXwb/

Fuente

2011-05-12 13:41:13 Sotiris

Pero no debería tener 'position: relative' en el li que haga' position: absolute' en el div act relativo a su padre relativamente posicionado? si la pantalla no es 'table-cell', y flotas el' li's que queda. entonces creo que deberías obtener el resultado de IE9/Opera. Estoy en el trabajo y atascado en IE7, pero alguien más podría verificar esto: http://jsfiddle.net/3wRTu/ – MicronXD

PD: No estoy diciendo que estés equivocado. Siempre pensé que un padre "relativo" siempre cambiaba el contexto de posicionamiento de un hijo 'absoluto' – MicronXD

Bueno,' position: relative' on 'li' no afecta' position: absolute' on 'div'. Eso es extraño. Supongo que 'display: table-cell' es el culpable. Lo sé, cómo lograr el mismo posicionamiento usando flotadores. Esta pregunta es solo por curiosidad: p – yatskevich

li con {display: table-cell; position: relative;} con div con posición absoluta dentro comporta de manera diferente en (FF4, WebKit) vs (Opera, IE9)

Respuesta

Cuestiones relacionadas