来源，以防jsFiddle消失

Question

我需要在其中一个跨距上设置内联块属性来设置宽度。但在那之后，我发现它与firefox上的其他“内联”跨度不一致。但它在IE上运行良好。请参阅以下html snip

<span class="" style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123123</span><span class="qqeditor-display-tab" style="display:inline-block;font-family: Times New Roman; font-size: 22pt; width: 22px; background-color: rgb(229, 102, 0); height: 33px;">aaa</span><span style="font-family: Times New Roman; font-size: 22pt; background-color: rgb(229, 102, 0);">123</span>

有没有办法可以在firefox上对齐这三个跨度？谢谢！

Answer 1

这实际上听起来像line-height问题。在这些元素上设置line-height到normal应该可以解决问题。

line-height会影响背景的原因是因为line-height元素上的inline不会影响文本的高度（这就是您要将背景应用于），line-height元素上的inline-block确实会影响元素的高度。虽然我可以详细了解它是如何工作的，但我想我们会发现一个例子值多少字，所以这里是一个例子：

Example of how line-height affects background and border / outline

来源，以防jsFiddle消失

<强> HTML

<p class="a">normal <span class="inline">A</span><span class="inline-block">B</span></p>
<p class="b">2em <span class="inline">A</span><span class="inline-block">B</span></p>
<p class="c">.5em <span class="inline">A</span><span class="inline-block">B</span></p>

<强> CSS

.a span {
    line-height:normal;
}
.b span {
    line-height:2em;
}
.c span {
    line-height:10px;
}
.inline-block {
    display:inline-block;
}

span {
    font-size:2em;
    outline:1px solid red;
    background:lime;
}
p {
    margin:2em;
    outline:1px solid green;
}

Answer 2

将它们全部inline-block;设置，尤其是以cross-browser不可接受的方式设置？

Demo

如何将span与内联块属性与其他跨度对齐？

2 个答案:

来源，以防jsFiddle消失