•  09-06-2019
  •  | 
  •  

题

使用CSS，我试图在Firefox中指定SPAN标记的高度，但它只是不接受它（IE确实如此，非常有趣）。

如果我使用DIV，Firefox接受高度，但使用DIV的问题是它之后的烦人换行，我在这个特定实例中不能拥有。

我尝试为DIV设置：

display: inline
的CSS样式属性，但Firefox似乎还是会恢复为SPAN行为，并再次忽略height属性。

有帮助吗？

解决方案 

<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 1和2的容器足够宽以便它们适合，这应该没问题。

其他提示

您可以将任何元素设置为 display：inline-block ，以允许它接收高度或宽度。这也允许您应用任何其他“块样式”。一个元素。

但要注意的一点是，Firefox 2不支持此属性。 Firefox 3是第一个支持此属性的基于Mozilla的浏览器。所有其他浏览器都支持此属性，包括Internet Explorer。

请记住，如果在怪癖模式下运行， inline-block 不允许您在Firefox上的元素内设置文本对齐方式。据我所知，所有其他浏览器都允许这样做。如果要在quirks模式下运行时设置文本对齐，则必须使用属性 -moz-inline-stack 而不是 inline-block 。请记住，这是一个仅限Mozilla的属性，因此您必须进行一些浏览器检测，以确保只有Mozilla才能获得此功能，而其他浏览器则会获得标准 inline-block 。

内联元素不能具有这样的高度（也不是宽度）。 SPAN默认情况下已经 display：inline 。在这种情况下，Internet Explorer实际上是损坏的浏览器。

由于您将其内联显示，因此应将高度设置为line-height属性的高度。

根据其布局方式，您可以始终在span / div上使用float：left或float：以防止换行。但如果你想在一个句子的中间，那个选项就出来了。

问题在于'display：inline'无法获得相关的高度，因为在内联时，它会从内容中获得高度。无论如何，你如何定义在一行末尾被破坏的盒子的高度？

您可能会尝试设置'line-height'，或者如果这不能令您满意，请设置填充：

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

当设置为 display：block; 时，只能更改span元素的高度（和宽度）。这是因为它通常是内联元素。 div 通常设置为 display：block; 。

解决方案可以是：

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

设置以下范围的高度应该适用于firefox 

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

元素内部的文本对齐，您可以使用padding和block-inline属性进行调整。显示：内联块;填充顶：3px的;例如

em = relative line-height

height

例如 height：1.1em ， line-height：1.1

= 100％填充

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top