gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:15:09 25 4
gpt4 key购买 nike

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

<!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 设置为正文

IE9、歌剧

result in IE9 and Opera

Firefox 4、WebKit

result in Firefox 4 and WebKit

我的问题是:什么是正确的行为?

最佳答案

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

示例: http://jsfiddle.net/6yXwb/

关于html - li {display : table-cell; position: relative;} with absolutely positioned div inside behaves differently in (FF4, WebKit) vs (Opera, IE9),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5978422/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com