li with {display:table-cell; 位置:相对;}绝对定位的div内部在(FF4,WebKit)vs(Opera,IE9)中表现不同
yat*_*ich 6 html css css-position
这是一个完整的测试用例:
<!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
Firefox 4,WebKit
我的问题是:正确的行为是什么？
因为我ul.container div认为position: absolute;left: 0;Firefox 和 Webkit 具有正确的行为。我不知道你需要实现什么，如果IE9和Opera的外观是正确的那么我建议你删除position: absolute;left: 0;
示例： http: //jsfiddle.net/6yXwb/
- @Ivan Yatskevich：“显示：表格单元格”是罪魁祸首。http://www.w3.org/TR/CSS21/visuren.html#propdef-position - `'position:relative' 对 .. table-cell.. 元素的影响未定义。` (10认同)