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()) 
      } 
     }