爲什麼這個對話框的內容表現得如此怪異？

下面是我正在談論的一個示例：https://jsfiddle.net/167bqchz/爲什麼這個對話框的內容表現得如此怪異？

對話框的邊框不會向下延伸到內容上，並且內容被「擠壓」得非常薄。如果你完全刪除內容，邊界是好的，一切都如預期的那樣，但只要你把其他東西放在那裏，它就會再次表現怪異。

爲什麼會發生這種行爲，我該如何解決它？

編輯補充：我在Arch Linux上運行Firefox Aurora（開發版）。未經任何其他瀏覽器或操作系統測試。

更新：在Arch Linux上測試Chromium，我也有同樣的錯誤。奇怪的事情？在這種情況下，在撥弄工作正常，但不是在所有在我的實際網站，嗯...

截圖：

enter image description here

HTML：

<div id="pool-dialog"> 
    <div class="dual-list list-right col-md-3"> 
     <h2><i class="fa fa-times"></i>&nbsp;Not Selected</h2> 
     <div class="well"> 
      <ul class="list-group"> 
       <li class="list-group-item">Testaaaaaaaaaaa</li> 
       <li class="list-group-item">Testaaaaaaaaaaaaaa</li> 
       <li class="list-group-item">Testaaaaaaaaaaaa</li> 
       <li class="list-group-item">Testaaaaaaaaaaaaa</li> 
       <li class="list-group-item">Testaaaaaaaaaa</li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS：

.dual-list { 
    padding-right: 5px; 
    padding-left: 5px; 
} 

.list-group { 
    margin-bottom: 0px; 
} 

.list-group-item { 
    max-height: 30px; 
    padding: 5px; 
} 

.well { 
    padding: 10px; 
} 

.ui-dialog { 
    border: 2px solid black; 
    border-radius: 5px; 
    background-color: white; 
} 

.ui-dialog-titlebar-close { 
    float: right; 
} 

.ui-dialog-titlebar { 
    border-bottom: 1px solid black; 
}

來源

2015-05-20 AppleDash

你是什麼意思？你想達到的預期結果是什麼？ – Lupin

我看到了小提琴，它的工作正確....也許關閉按鈕？ –

@Lupin在Linux上不能在Firefox上使用Aurora。行爲如我所描述的那樣。 – AppleDash

我自己解決了這個問題。事實證明，我不應該在div上有.col-md-3。我從需要.col-md-3的代碼的另一部分複製此代碼，並忽略將其刪除。刪除它已修復它。

來源

2015-05-20 16:35:41 AppleDash

爲什麼這個對話框的內容表現得如此怪異？

回答

相關問題