我需要在其中一個跨度上設置內聯塊屬性來設置其寬度。但之後，我發現它不符合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消失

相關問題