li with {display: table-cell; position: relative;} with absolutely positioned div inside behaves differently in (FF4, WebKit) vs (Opera, IE9)_问答_开发者

li with {display: table-cell; position: relative;} with absolutely positioned div inside behaves differently in (FF4, WebKit) vs (Opera, IE9)

开发者 https://www.devze.com 2023-03-05 04:14 出处：网络

Here is a complete test case: <!DOCTYPE html> <html> <head> <title>test</title>

Here is a complete test case:

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

Absolutely positioned div has li as offsetParent in IE9 and Opera, while WebKit and Firefox set offsetParent to body.

IE9, Opera

li with {display: table-cell; position: relative;} with absolutely positioned div inside behaves differently in (FF4, WebKit) vs (Opera, IE9)

Firefox 4, WebKit

li with {display: table-cell; position: relative;} with absolutely positioned div inside behaves differently in (FF4, WebKit) vs (Opera, IE9)

My question is: what is the correct behavior?

Because ul.container div has position: absolute;left: 0; I think that Firefox and Webkit have the correct behavior. I don't know what you need to achieve, if the appearance of IE9 and Opera is the correct then I suggest you to remove position: absolute;left: 0;

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