爲什麼使用display：inline-block？

新display:inline-block屬性似乎是在做display:block + float:left/right一個有用的替代，但它引入了奇怪的間距/白色空間的行爲似乎否定的便利。（見here和here）最重要的是，瀏覽器的支持是參差不齊和需要修復，儘管這顯然會改變。爲什麼使用display：inline-block？

根據this雅虎UI大量使用它，但爲什麼？使用內聯塊有沒有引人注目的情況？

來源

2011-03-03 Yarin

'display：inline-block'對CSS3並不陌生。 – BoltClock 2011-03-03 20:36:14

@ BoltClock-哦，以爲這是因爲瀏覽器支持衆多... – Yarin 2011-03-04 04:38:40

一個有用的情況是，當你想擁有可變高度的物品行時。如果你要使用浮動，那麼你還必須想出一些方法來清除第一行中的所有第二行。 Here's an example of that ugly behavior.

但是，使用內聯塊的魔法，here's a version that works。只有兩個額外的CSS規則，它甚至可以在IE6和7中使用！

來源

2011-03-03 18:22:35 sdleihssirhc

感謝您解釋一些您無法使用浮動功能做的事情 - 這是最有意義的。但是，你能解釋一下「另外兩個CSS規則」是什麼嗎？ – Yarin 2011-03-04 04:46:06

@Yarin IE6/7顯式地不識別'display：inline-block'，但是通過包含'* display：inline;變焦：1'。第一條規則是黑客攻擊，第二條觸發'hasLayout'。（對不起，回到你身邊需要很長時間。） – sdleihssirhc 2011-03-09 20:40:01

我通常對內聯元素使用內聯塊，我希望能夠給出高度和寬度。這在使用精靈時非常有用（特別是使用滑動門方法的圓角按鈕）。儘管我沒有使用它，但我更願意在需要時使用浮點數，而不是將塊級元素分解爲使用內聯塊。

來源

2011-03-03 18:20:27 scrappedcola

而對於我的回憶行內塊不是一個「標準」實現。即一些瀏覽器可以處理它，有些則不能。至少在我最後的嘗試。 – 2011-03-03 18:23:14

IE7確實和FF一樣好。我還沒有在Chrome/Safari中測試過（儘管我猜測它會起作用）。 – scrappedcola 2011-03-03 20:37:25

因爲浮動在水平浮動方面在IE中引入問題，所以需要分配一個明確的寬度才能保持在同一個水平面上。通過內聯塊（帶有修補程序），您可以避免將明確寬度分配給浮動項目，但可以保持您所需的塊狀內聯行爲。

之後您也不必清除項目，但我想補償您需要執行的內聯塊修復。

來源

2011-03-03 18:21:04

@ meder-你總是給我一些想法，但是這個屬性不僅可以用於補償IE浮點數怪癖嗎？愛你的網站btw。 – Yarin 2011-03-04 04:42:55

爲什麼使用display：inline-block？

回答

相關問題