Webkit浏览器呈现多列布局内容错误

Question

我在引导模式下有两列布局。应该有一个引导下拉按钮作为内容。 Firefox正确呈现它，但基于Webkit的浏览器无法正确显示按钮。该按钮不会悬停或点击事件，因为其位置呈现错误。

现在的问题是：我做错了什么？有没有办法避免这个问题？

的的jsfiddle是在这里：http://jsfiddle.net/cenap/mtpj8god/4/

全屏：http://jsfiddle.net/cenap/mtpj8god/4/embedded/result/

.multicolumn-container { 
 
    width: 250px; 
 
    height: 300px; 
 
    -webkit-column-count: 2; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 2; 
 
    /* Firefox */ 
 
    column-count: 2; 
 
    -webkit-column-rule: 1px outset #CCC; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-rule: 1px outset #CCC; 
 
    /* Firefox */ 
 
    column-rule: 1px outset #CCC; 
 
    overflow: auto; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 100px; 
 
    min-height: 60px; 
 
    text-align: center; 
 
    border: 3px solid #666; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 
.err { 
 
    font-size: 8px; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="hero-unit"> 
 
    <h1>Multicolumn in Bootstrap modal</h1> 
 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
     Launch demo modal 
 
    </button> 
 
    </div> 
 
</div> 
 

 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
 
     </button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     <div class='btn-group'> 
 
      <button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span> 
 
      </button> 
 
      <ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'> 
 
      <li><a href='#'>Some Action</a> 
 
      </li> 
 
      <li class='divider'></li> 
 
      <li><a href='#'>Some Other Action</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <--- This works but the ones in columns below do not render correctly in webkit. </div> 
 
      <div class="modal-body"> 
 
      <div class="multicolumn-container"> 
 
       <div class="box">1 
 
       <div class='btn-group'> 
 
        <button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span> 
 
        </button> 
 
        <ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'> 
 
        <li><a href='#'>Some Action</a> 
 
        </li> 
 
        <li class='divider'></li> 
 
        <li><a href='#'>Some Other Action</a> 
 
        </li> 
 
        </ul> 
 
       </div> 
 
       <span class="err">This is rendered wrong in webkit browsers</span> 
 
       </div> 
 
       <div class="box">2 
 
       <div class='btn-group'> 
 
        <button class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span> 
 
        </button> 
 
        <ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'> 
 
        <li><a href='#'>Some Action</a> 
 
        </li> 
 
        <li class='divider'></li> 
 
        <li><a href='#'>Some Other Action</a> 
 
        </li> 
 
        </ul> 
 
       </div> 
 
       <span class="err">This is rendered wrong in webkit browsers</span> 
 
       </div> 
 
       <div class="box">3</div> 
 
       <div class="box">4</div> 
 
       <div class="box">5</div> 
 

 
      </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
    </div> 
 
    <!-- /.modal -->

Answer 1

其在Mac OSX WebKit浏览器工作正常 - 铬37+和Safari 7+，为在Firefox 30+上。请指定浏览器版本。

Answer 2

似乎Webkit中存在一个错误，并且其开发人员（Dave Hyatt）打印的列已被禁用，因为分页不能正确执行。所以WebKit实现有关闭CSS3列，但Firefox正确渲染它们。我试图让列在Chrome中工作，但仍然从Firefox获得更好的结果。此外，还有一些Dave Hyatt的帖子，其中一篇文章指出“列正在使用新的分页模式，但打印尚未使用。”（https://bugs.webkit.org/show_bug.cgi?id=45993）

Answer 3

我知道问题被问到一年多了，但我发现这对我有效。

-webkit-perspective: 1; 

见http://jsfiddle.net/mtpj8god/6/

更多关于它（从http://caniuse.com/#search=column-count，在已知的问题）：

Chrome的报道错误地计算容器高度，并 经常断裂的边缘，填充，并且可以显示前一列底部的下一个 列的1px。部分问题可以通过加入-webkit-perspective：1来解决，可以通过 来解决。到色谱柱容器。 这会为容器创建一个新的堆叠上下文，并且显然 会导致Chrome（重新）计算列布局。