Question

我一直试图弄清楚为什么在这个网站（http://areyouafuckingidiot.com/）中间的非常大的“不”，似乎与其他div重叠。当你检查“不！”时，你可以看到这个。文本，并添加'border-bottom：solid 1px darkblue'到.statement-text，你可以看到它如何重叠下一个元素。（暂时搁置我为什么要使用锚标签，这将在以后发生）。

然而，当我尝试用一个简单的小提琴复制时，我无法做到。这是小提琴：http://jsfiddle.net/aronchick/uXH9C/5/，简单地简化为我正在做的事情。

<div id="firstDiv" class="normalSized"><a href="#" class="normalLink">Great text in here</a></div>
<div id="secondDiv" class="veryLarge"><a href="#" class="LargeLink">VERY LARGE</a></div>
<div id="thirdDiv" class="normalSized"><a href="#" class="normalLink">Back to Normal</a></div>

中间div间隔适当且不重叠。有什么想法吗？

Answer 1

您的小提琴与页面的样式不同。这是一个updated fiddle具有相同的样式，显然我们发现相同的问题，事情是行高不是相对于元素的高度计算的，而是相对于它的字体大小。我发现防止元素重叠的解决方案是将其设置为inline-block。在你的情况下：

.statement-text{
    display: inline-block;
}

看似不尊重Chrome上大字体的Div高度

1 个答案: