Firefox中的跨距高度

可以将任何元素设置为 display: inline-block 允许它接收高度或宽度。这还允许您将任何其他“块样式”应用于图元。

但是需要注意的一点是Firefox2不支持这个属性。Firefox3是第一款基于Mozilla的浏览器,支持此属性。包括Internet Explorer在内的所有其他浏览器都支持此属性。

记住 inline-block -moz-inline-stack 而不是 . 请记住,这是一个仅限Mozilla的属性,因此您必须进行一些浏览器检测,以确保只有Mozilla获得此属性,而其他浏览器则获得该标准 内联块 .

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

div's 1和2的宽度足以容纳它们,这应该可以。

内联元素不能有那样的高度(或宽度)。跨距已经开始变大 display: inline

由于是内联显示,因此高度应设置为“线高度”属性的高度。

根据布局的不同,可以始终在span/div上使用float:left或float:right来防止断线。但是如果你想在句子的中间,那个选项就出来了。

问题是“display:inline”无法获取关联的高度,因为它是内联的,从内容中获取其高度。无论如何,如何定义在行尾断开的长方体的高度?

您可以尝试设置“线条高度”,或者如果无法满足您的要求,请设置一个填充:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

仅当跨度图元设置为时,才能更改其高度(和宽度) display: block; div 设置为 显示:块; 正常地

解决方案可以是使用:

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

要设置跨距高度,应在firefox中执行以下操作

span {
  display: block;
  height: 50px;
}

可以使用填充和块内联属性调整元素内部的文本对齐方式。显示:内联块;垫面:3件;例如

height 在里面 em = relative line-height

例如 height:1.1em 具有 line-height:1.1

=100%填充