Html Firefox中表格单元格内的CSS绝对定位对象显示对象

我在CSS定位中遇到了很大的问题，因为绝对元素位于

display:table cell

object中。除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>

以下是这方面的JSFIDDLE：

请在Chrome中打开此链接，然后在Firefox中打开，您将看到不同之处。

---

您知道如何解决此问题的正确方法吗？

可能是它的问题由此产生-

及-

使用div将元素包装为position:relative

---

也许是因为这个问题-

及-

使用div将元素包装为position:relative

---

Firefox在绝对定位和显示：表格单元格方面存在问题

您需要使用相对定位将图元包裹在块图元中，然后它将工作：

---

Firefox在绝对定位和

显示：表格单元格方面存在问题

-

您需要使用相对定位将图元包裹在块图元中，然后它将工作：

---

问题在于Firefox包含滚动条吗？还是边界重叠？（两者都有？）问题在于Firefox包含滚动条吗？还是边界重叠？（都是？）我找到了这个解决方案，但当我用

position:relative

将其包装在DIV中时，它会丢失父元素高度。我的意思是，这个

.pointer

元素应该是100%高度-正如你在更新的小提琴上看到的，它不是100%高度。使用而不是，就像在Pete的回答中一样。我忘了添加一些css规则-.rel{position:relative；display:block；height:100%；width:100%；}谢谢@WaNgeL，Pete的解决方案很有帮助+1谢谢你的帮助。我找到了这个解决方案，但是当我用

position:relative

将它包装在DIV中时，它会丢失父元素高度。我的意思是，这个

.pointer

元素应该是100%高度-正如你在更新的小提琴上看到的，它不是100%高度。使用而不是，就像在Pete的回答中一样。我忘了添加一些css规则-.rel{position:relative；display:block；height:100%；width:100%；}谢谢@WaNgeL，Pete的解决方案很有帮助+1谢谢你的帮助。这真的修复了Firefox的问题！谢谢@Pete这真的修复了Firefox的问题！谢谢@Pete

.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;
}

.rel {
    position:relative;
    display:block;
    height: 100%;
    width:100%;
}