我在 display:table-cell
对象中使用绝对元素进行 CSS 定位时遇到了很大的麻烦。除 Firefox 外,所有浏览器都能正确呈现。
我的 HTML 看起来像这样:
<ul class="slider">
<li rel="sl1">
<span class="sltitle">Item 1</span>
<span class="pointer"></span>
</li>
<li rel="sl2">
<span class="sltitle">Item 2</span>
<span class="pointer"></span>
</li>
<li rel="sl3">
<span class="sltitle">Item 3</span>
<span class="pointer"></span>
</li>
</ul>
和 CSS:
.slider {
list-style: none;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.slider li {
display: table-cell;
border: 1px solid #1C1A1A;
position: relative;
overflow: hidden;
}
.slider li span.pointer {
display: block;
border: 1px solid red;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
这是它的 JSFIDDLE:http://jsfiddle.net/zur4ik/SN7zL/
请在 Chrome 中打开此链接,然后在 Firefox 中打开,您会看到不同之处。 您知道如何解决此问题的正确方法吗?
最佳答案
关于html - Firefox 中表格单元格显示对象内的 CSS 绝对定位对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18014463/