使用內聯塊有什麼用處？

Question

內聯塊非常好用。想象一下，我想集中幾個div，而不是擺弄一些margin-auto（當我們想要居中多個div時，最終實際上不工作），我只需要給所有這些div分配inline-block並把它們與文本對齊一個div容器：中心

我的意思，我只是給了爲什麼直列塊只是PWN一個例子（我只希望碰到）。因此，內聯塊允許我們給填充和邊距內聯元素，同時我們不必爲這些元素聲明明確的寬度。這裏的確切點是什麼？我簡直不敢相信這是沒有代價的。

Answer 1

該捕獲是對自然塊級元素的IE6/7支持。它只是變得如果inline-block就像a或span而是一個內聯元素..

這可以圍繞幸運（直列塊爽！）利用hasLayout的待加工使用它的權利第一次 - 總之重新聲明的塊顯示爲inline一旦他們有hasLayout的觸發它們（其中原始inline-block規則一樣）

另外美中不足的是，inline-blocks自然應該有這樣的一句話它們之間的空白，他們確實在大多數瀏覽器做的，但你已經猜到它不在IE中。所以當你試圖將盒子並排放在一起時，就好像它們被漂浮了一樣，你必須允許這個空間，但不能在IE中。

有幾種方法來控制這種差距，與word-spacing是可以說是最合乎邏輯的，但不是所有的瀏覽器同意這一點，所以最穩定的跨瀏覽器的方式，我發現是使用margin-right: -4px;這意味着你可以對IE6/7使用第二種解決方法（因爲它沒有這些空白）重置它的右邊距至0 - 哦，HTML中的空白有時也會拋出一個曲線球。

這裏有一個片段，我嘗試測試以合併IE瀏覽器修復，它似乎在瀏覽器中運行良好，它也測試HTML問題中的空白（我無法重建..但在那裏，當我最初測試此代碼在幾個星期前）

CSS：

#wrapper { 
    background: #eee; 
    width: 200px; 
    padding: 1px 0; 
} 

.foo, .bar { 
    display:inline-block; 
    width:98px; 
    background: #eee; 
    color:white; 
    text-align:center; 
    font-size: 30px; 
    font-family: "trebuchet ms", georgia; 
    margin-right: -4px; /* this is the easiest cross-browser fix to zero the whitespace between blocks */ 
} 

.foo, .bar { 
/* THE IE workarounds, must come after the above rule */ 
/* note this is a hack.. the !ie7 part.. 
    you could put this rule set in a conditional 
    or use your favourite method to feed to LTE IE 7 */ 

    display: inline !ie7; 
    margin-right: 0 !ie7; 
} 

.foo {border: 1px solid #000;} 
.bar {border: 1px solid #f00;} 

p {margin: 0;} 
.wrap {margin: 20px 0;} 

HTML

<div id="wrapper"> 
<div class="wrap"> 
    <p class="foo"> Foo </p> 


    <p class="bar"> Bar </p> 
</div> 
</div> 

Answer 2

過去的瀏覽器支持很差。現在的支持是很好的，所以除非你需要支持舊的瀏覽器，否則就去做吧。

Answer 3

我愛他們，以及但是有些問題是：

在IE6和IE7很奇怪的行爲（可能仍然是一個大問題）。

Firefox 2中的糟糕行爲（不再那麼重要）。

而且，IE6和IE7只能將自然「內聯」（如跨度）的內容更改爲「內聯塊」，如果某些內容自然是「阻止」（例如div），則不能。