li with {显示：表格单元格;位置：相对;} 内部绝对定位的 div 在（FF4，WebKit）与（Opera，IE9）中的行为不同

发布于 2024-11-06 23:04:01 字数 1593 浏览 0 评论 0原文

这是一个完整的测试用例：

<!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 在 IE9 和 Opera 中将 li 作为 offsetParent，而 WebKit 和 Firefox 设置 offsetParent< /code> 到 body。

IE9、Opera

IE9 和 Opera 的结果

Firefox 4、WebKit

Firefox 4 和 WebKit 中的结果

我的问题是：正确的行为是什么？

原文

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

result in IE9 and Opera

Firefox 4, WebKit

result in Firefox 4 and WebKit

My question is: what is the correct behavior?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

友谊不毕业 2024-11-13 23:04:01

因为 ul.container div 具有 position:absolute;left: 0; 我认为 Firefox 和 Webkit 具有正确的行为。我不知道你需要实现什么，如果IE9和Opera的外观是正确的那么我建议你删除 position:absolute;left: 0;

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

回复收藏 0 原文

~没有更多了~