Twitter Bootstrap和Chrome中的奇怪溢出問題

Question

我有一個Twitter Bootstrap，它包含一個Select2組件。

演示可以在http://jsfiddle.net/U4KTM/1/

被視爲有在Chrome兩個問題（在FF或IE不明顯）：

• 有一個在鉻的溢流問題引起垂直滾動條在井中。這似乎是通過以下CSS來解決：

  .tab-content {0} {0} {0} {0}溢出：隱藏; }

• Chrome中的第二個問題是，在底部下拉菜單中選擇一個項目會在井中導致一個奇怪的跳躍問題，然後一些井的內容消失在頂部。

有問題的代碼如下：

<div class="well"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#panel1" data-toggle="tab">First tab</a></li> 
     <li class=""><a href="#panel2" data-toggle="tab">Second tab</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="panel1"> 
      <div class="control-group"> 
       <label for="bar" class="control-label"></label> 
       <div class="controls"> 
        <select name="bar" class="selector"> 
         <option value="0">First Option</option> 
         <option value="1" selected="selected">Second Option</option> 
         <option value="2">Third Option</option> 
        </select> 
       </div> 
      </div>      
      <div class="control-group"> 
       <label for="bar" class="control-label"></label> 
       <div class="controls"> 
        <select name="bar" class="selector"> 
         <option value="0">First Option</option> 
         <option value="1" selected="selected">Second Option</option> 
         <option value="2">Third Option</option> 
        </select> 
       </div> 
      </div>    
     </div> 
    </div> 
</div> 

Answer 1

嘗試覆蓋該CSS類.tab-content：

有：

.tab-content { 
     overflow:visible; 
} 

樣式位於：

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css

線：608

Answer 2

我就遇到了這個問題爲好。似乎你需要對select2.js稍作修改，並在_makeMaskCss中註釋掉高度。這似乎與Bootstrap響應對我而言。演示似乎工作得很好。

function _makeMaskCss() { 
      return { 
       width : Math.max(document.documentElement.scrollWidth, $(window).width())//, 
       //height : Math.max(document.documentElement.scrollHeight, $(window).height()) 
      } 
     }