display：inline-block;在Firefox上的問題

我已經在Firefox中使用內聯塊屬性，也可能在IE中。我期待與我在Chrome中獲得的結果相同。display：inline-block;在Firefox上的問題

Chrome桌面截圖

Chrome和Firefox的平板電腦（我必須保持「A」和「BC」一起在平板視圖）

enter image description here

這是一個問題與Firefox桌面視圖。正如你可以看到E在屏幕截圖中不可見。我谷歌，但沒有找到解決方案。 JSFiddle

enter image description here

HTML

<div class="text-center"> 
    <div class="text"> 
     <div class="col-first">A</div> 
     <div class="col-last"> 
      <ul class="links"> 
       <li>B</li> 
       <li>C</li> 
      </ul> 
     </div> 
     <div class="col-middle"> 
      <ul> 
       <li>C</li> 
       <li>D</li> 
       <li>E</li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS

ul{ margin:0; padding:0; list-style:none} 

.text-center{text-align:center} 
.text{ display:inline-block} 
.col-first { 
    float: left; 
    padding-right: 20px; 
} 

.col-last { 
    float: right; 
} 

.col-middle { 
    overflow: hidden; 
    white-space: nowrap; 
} 

.social li{float:left} 
.col-middle li{ display:inline-block; padding:0 17px} 

@media(max-width:768px){ 
    .col-first {float:none;display:inline-block; padding-right:10px; vertical-align:top} 
    .col-last {float:none;display:inline-block} 
    .col-middle { width:100%} 
}

來源

2015-09-14 Carlos

「而且可能IE也是」你打擾了檢查，還是你只是假設？這樣一句話讓我懷疑你是否已經完成了任何調試。 – TylerH

這似乎是與'display：inline-block;'相關的_「白色空間」_問題。有關更多信息，請參閱[本參考]（https://css-tricks.com/fighting-the-space-between-inline-block-elements/）... – War10ck

您的小提琴與您的HTML源不一樣。無論如何，我沒有看到兩個瀏覽器與小提琴之間的行爲差異。 –

你可以看到正在發生的事情，如果你惹列寬左右。從本質上講，瀏覽器正在創建一個寬度（在我的情況下：142px，該div內的內容約爲182px），因此瀏覽器「將E摺頁」，因爲它不適合分配給它的空間。

此div尺寸問題是由於div的大小是在chrome加載時確定的，而不是由chrome再次檢查造成的。你可以通過使你的瀏覽器寬度非常大（瀏覽器功能縮小瀏覽器），然後刷新瀏覽器。你的e會按需要顯示，但是如果你讓你的瀏覽器變得更窄，而且再寬一些，媒體查詢將重置該div的大小，並且不會讓div回落。

您可以通過使用相對寬度（例如.text {display：inline-block; width：30％;}）或更改列表結構來設置寬度大於（或等於）來解決此問題。

來源

2015-09-14 18:10:06 theinvisibleduck

display：inline-block;在Firefox上的問題

回答

相關問題