Вопросы Теги

li with {display: table-cell; position: relative;} with absolutely positioned div inside behaves differently in (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>

Абсолютно позиционированный div имеет li как offsetParent в IE9 и Opera, тогда как WebKit и Firefox устанавливают offsetParent в body ].

IE9, Opera

result in IE9 and Opera

Firefox 4, WebKit

result in Firefox 4 and WebKit

Мой вопрос: : каково правильное поведение?

6
задан yatskevich 12 May 2011 в 14:40
поделиться