Question

这段代码是更重要的事情的一部分，但为了简单起见，我试图尽量减少它。我在相对定位的锚链接中有绝对定位的span标记，在每个浏览器中它都可以正常工作http://jsfiddle.net/ee7kq/。在firefox中，看起来span元素是基于NAV而不是锚点定位的，因为所有内容都排列在左侧或右侧，而不是在锚点内正确定位

HTML

<nav>
 <a><span class="num">1</span><span class="name">Words</span></a>
 <a><span class="num">2</span><span class="name">Words</span></a>
 <a><span class="num">3</span><span class="name">Words</span></a>
</nav>

CSS

nav { position: absolute; display: table; width: 100%; }
nav a { position: relative; display: table-cell; border: 1px solid #d8d8d8; height: 50px;}
nav a .num { left: 0; position: absolute;  }
nav a .name { right: 0; position: absolute; }

http://jsfiddle.net/ee7kq/ 我希望它看起来如何
http://jsfiddle.net/ee7kq/1/ 它在firefox中的外观

Answer 1

position: relative;

似乎无法与

一起使用

display: table-cell;

您可以将您的跨度包装在另一个元素集

中

display: block;
position: relative;

这是一个工作小提琴：http://jsfiddle.net/ee7kq/2/

Answer 2

CSS spec表示：

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

由于未定义此处的操作，Firefox正确地选择忽略table-cell元素上的位置，使容器成为最近的锚点。

要么不使用table显示，要么将定位的元素再次包装在block元素中，并将position: relative放在那里而不是table-cell元素。

Fiddle

<style>
nav {
    position: absolute;
    display: table;
    width: 100%;
}
nav a {
    display: table-cell;
    border: 1px solid #d8d8d8;
    height: 50px;
}
nav div {
    position: relative;
}
nav a .num {
    left: 0;
    position: absolute;
}
nav a .name {
    right: 0;
    position: absolute;
}
</style>
<nav>
    <a><div><span class="num">1</span><span class="name">Words</span></div></a>
    <a><div><span class="num">2</span><span class="name">Words</span></div></a>
    <a><div><span class="num">3</span><span class="name">Words</span></div></a>
</nav>

相对于桌面单元格在Firefox中无法工作？

2 个答案: