2014-09-25 51 views
1

我在引導模式下有兩列布局。應該有一個引導下拉按鈕作爲內容。 Firefox正確呈現它,但基於Webkit的瀏覽器無法正確顯示按鈕。該按鈕不會懸停或點擊事件,因爲其位置呈現錯誤。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 -->

回答

0

其在Mac OSX WebKit瀏覽器工作正常 - 鉻37+和Safari 7+,爲在Firefox 30+上。請指定瀏覽器版本。

+0

我在Windows 7上。Chrome最新版本。 – salihcenap 2014-09-26 10:00:10

0

似乎Webkit中存在一個錯誤,並且其開發人員(Dave Hyatt)打印的列已被禁用,因爲分頁不能正確執行。所以WebKit實現有關閉CSS3列,但Firefox正確渲染它們。我試圖讓列在Chrome中工作,但仍然從Firefox獲得更好的結果。此外,還有一些Dave Hyatt的帖子,其中一篇文章指出「列正在使用新的分頁模式,但打印尚未使用。」(https://bugs.webkit.org/show_bug.cgi?id=45993

0

我知道問題被問到一年多了,但我發現這對我有效。

-webkit-perspective: 1; 

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

更多關於它(從http://caniuse.com/#search=column-count,在已知的問題):

Chrome的報道錯誤地計算容器高度,並 經常斷裂的邊緣,填充,並且可以顯示前一列底部的下一個 列的1px。部分問題可以通過加入-webkit-perspective:1來解決,可以通過 來解決。到色譜柱容器。 這會爲容器創建一個新的堆疊上下文,並且顯然 會導致Chrome(重新)計算列布局。