我需要在其中一个跨度上设置内联块属性来设置其宽度。但之后，我发现它不符合Firefox上的其他“内联”跨度。不过，它在IE上运行良好。看到下面的HTML剪辑如何将跨度与内嵌块属性与其他跨度对齐？

<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上对齐这三个跨度？谢谢！

来源

2011-12-02 ryan

是在SPAN设置与inline-block的高度故意的吗？如果我删除它（并将'font-size'移动到http://jsfiddle.net/frozenkoi/kN3sB/中包含的DIV），那么所有的SPAN都会变成相同的高度（好吧，Firefox和Rockmelt就像1像素更高。） – frozenkoi

感谢您的评论。 SPAN上的高度是使其具有与其他两个相同的高度值。正如你所看到的，如果我删除它，它会比其他跨度更高。（不同的font-family会导致不同的结果，如果我能找到一种方法使跨度与其他跨度一样高，那么我不太在意高度。） – ryan

您是否尝试设置'line-height'为一个容器元素？现在太累了，我现在自己尝试一下，但我认为这可能有助于SPAN的高度，而不需要'inline-block'。 – frozenkoi

是设置他们全部inline-block;，特别是以一种工作方式cross-browser不可接受？

Demo

来源

2011-12-02 07:31:12 bookcasey

书柜，谢谢你的回答。是的，我正在考虑设置所有跨度内嵌块。但是这对JS代码来说确实是一个很大的改变，我不知道它是否会导致其他问题。我希望它有一个更简单的方法来解决它。 – ryan

这实际上听起来像一个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; 
}

来源

2012-02-26 00:00:49 0b10011

你有没有参照W3C规范来定义'line-height'的行为来调整'inline-block'的高度？我所知道的最接近的是http://www.w3.org/TR/CSS2/visudet.html#inline-box-height，但似乎并没有说明我用真实世界的用户代理所看到的行为。 –

@MikkoRantalainen，这将更详细地解释它：http://www.w3.org/TR/2003/WD-CSS21-20030915/visudet.html#line-height – 0b10011

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

回答

来源，万一的jsfiddle消失

相关问题