SPAN在Firefox中的高度

Question

使用CSS，我試圖指定一個SPAN標籤在Firefox中的高度，但它只是不接受它（IE瀏覽器，足夠有趣）。

如果我使用DIV，Firefox接受高度，但使用DIV的問題是它後面的惱人的換行符，在這個特定的實例中我不能擁有它。

我試着爲DIV設置：

display: inline

的CSS樣式屬性，但是Firefox似乎總是恢復到SPAN行爲，並且再次忽略高度屬性。

Answer 1

<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足夠寬以適合他們，這應該沒問題。

Answer 2

由於您正在以內聯方式顯示它，因此應將高度設置爲您的line-height屬性的高度。

根據佈局方式的不同，您可以在span/div上始終使用float：left或float：right來防止換行。但是如果你想在句子中間使用這個選項，那麼這個選項就不存在了。

Answer 3

內聯元素不能有這樣的高度（或寬度）。默認情況下，SPAN已經是display: inline。在這種情況下，Internet Explorer實際上是破碎的瀏覽器。

Answer 4

當您將span元素設置爲display: block;時，您只能更改該元素的高度（和寬度）。這是因爲它通常是內聯元素。通常情況下，div設置爲display: block;。

一個解決辦法是使用：

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

Answer 5

的問題是，「顯示：內聯」不能得到高度相關的，因爲是線上，它得到其高度從它的內容。無論如何，你如何定義一個在行尾被打破的盒子的高度？

你可以嘗試設置「行高」模式，或者如果這不起作用，讓您滿意，設置填充：只要

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

Answer 6

您可以將任何元素設置爲display: inline-block以允許它接收高度或寬度。這也允許你將任何其他「塊樣式」應用於元素。

然而，要注意的一件事是Firefox 2不支持這個屬性。 Firefox 3是第一款支持該屬性的基於Mozilla的瀏覽器。所有其他瀏覽器都支持此屬性，包括Internet Explorer。

請記住，inline-block不允許您在Firefox中的元素內部設置文本對齊方式（如果在怪癖模式下運行）。據我所知，所有其他瀏覽器都支持此功能。如果要在怪癖模式下運行時設置文本對齊方式，則必須使用屬性-moz-inline-stack而不是inline-block。請記住，這是一個僅限Mozilla的屬性，因此您必須執行一些瀏覽器檢測，以確保只有Mozilla才能獲取此內容，而其他瀏覽器則獲得標準inline-block。

Answer 7

在em = relative line-height

例如height:1.1emheight與可以調整使用填充和塊內聯的屬性的元素內line-height:1.1

= 100％填充

Answer 8

文本對齊。顯示：內聯塊;填充頂：3px的;例如

Answer 9

要設置跨度以下的高度應在Firefox

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