Twitter Bootstrap 和 Chrome 中的奇怪溢出问题

Posted 2023-05-07

【中文标题】Twitter Bootstrap 和 Chrome 中的奇怪溢出问题

【英文标题】：Weird overflow issue in Twitter Bootstrap and Chrome

【发布时间】：2013-04-27 04:18:46

【问题描述】：

我有一个 Twitter Bootstrap 井，其中包含一个 Select2 组件。

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

Chrome 中存在两个问题（在 FF 或 IE 中不明显）：

chrome 中存在溢出问题，导致井中出现垂直滚动条。这似乎可以通过以下css解决：

.tab 内容 溢出：隐藏；

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>

【参考方案1】：

尝试覆盖这个 CSS 类 .tab-content:

与：

.tab-content 
      overflow:visible;
 

样式位于：

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

行：608

【参考方案2】：

我也遇到了这个问题。似乎您需要对 select2.js 稍作更改并注释掉 _makeMaskCss 中的高度。这似乎发生在我的 Bootstrap Responsive 中。该演示似乎运行良好。

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