0

我在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 中打开，您会看到不同之处。您知道如何解决此问题的任何正确方法吗？

4

2 回答 2

3

Firefox 在绝对定位方面存在问题display:table-cell-请参阅此

您需要将元素包装在具有相对定位的块元素中，然后它将起作用：

例子

于 2013-08-02T10:34:34.117 回答
1

可能是这个问题的问题 - Firefox是否支持位置：表格元素上的相对？

And -在 Firefox 中的 table-cell 元素上定位上下文

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

http://jsfiddle.net/N6bUU/2/

.rel {
    position:relative;
    display:block;
    height: 100%;
    width:100%;
}
于 2013-08-02T10:33:56.273 回答