Question

我有两个内联元素。您可以假设它们完全相同，除了一个的位置设置为绝对位置而它位于另一个位置之下。像这样：

<body style="text-align: center;">
<span style="background-color: #000; color: white; font-size: 300px; line-height: 1; padding: 0; position: relative;">
    AAA <span style="background-color: #333; color: white; font-size: 300px; line-height: 1; padding: 0; position: absolute; top: 100%; left: 0;">AAA</span>
</span>
</body>

小提琴：http://jsfiddle.net/CSPFL/5/

当然，全屏小提琴：http://jsfiddle.net/CSPFL/5/show/

跨度不一样！静态跨度有某种填充。是否可以删除此填充，而不将位置更改为绝对？提前谢谢！

编辑：如果您将左侧更改为100％并将顶部更改为10％，则可以看到它们的高度不同。它们似乎与Mac的FF高度相同。

Answer 1

试试这个：

<span style="background-color: #000; color: white; font-size: 300px;  padding: 0;float:left;">AAA</span>
<span style="background-color: #000; color: white; font-size: 300px;  padding: 0; position: absolute;float:left;">AAA</span>

http://jsfiddle.net/CSPFL/1/

Answer 2

根据position: absolute，问题可以隔离开来。只需将其添加到span的{{1}}规则即可更改其外观。这取决于不同类型元素的不同高度计算算法（CSS的棘手方面的一部分）。

由于您的问题是未定位的line-height: 1太高，因此在渲染时将其转换为块元素（或内联块）可能会有所帮助：add

span

或

display: block

代表display: inline-block。

删除内联span元素的填充

2 个答案: