li с {display: table-cell; position: относительный;} с абсолютно позиционированным div внутри ведет себя по-разному в (FF4, WebKit) vs (Opera, IE9) - PullRequest
Новая
       2

li с {display: table-cell; position: относительный;} с абсолютно позиционированным div внутри ведет себя по-разному в (FF4, WebKit) vs (Opera, IE9)

6 голосов
/ 12 мая 2011

Вот полный тестовый пример: 

<!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

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

1 Ответ

2 голосов
/ 12 мая 2011

Поскольку ul.container div имеет position: absolute;left: 0; Я думаю, что Firefox и Webkit ведут себя корректно. Я не знаю, что вам нужно для достижения, если внешний вид IE9 и Opera правильный, то я предлагаю вам удалить position: absolute;left: 0;

Пример: http://jsfiddle.net/6yXwb/

...