FireFox中的CSS列中斷

我想找出一個跨瀏覽器方法來實現一個無序列表的柱狀佈局。標記來自CMS，所以我不能在添加類之前修改輸出。我可以讓列工作，但是我也需要指定列中斷，因爲列並不總是相等的。該標記的樣子：FireFox中的CSS列中斷

ul { 
 
    list-style: none; 
 
} 
 
.c3 { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
.colBreak { 
 
    -moz-column-break-before: always; 
 
    -webkit-column-break-before: always; 
 
    column-break-before: always; 
 
    font-weight: bold; 
 
}

<ul class='c3'> 
 
    <li class='colBreak'>Item1</li> 
 
    <li>Item2</li> 
 
    <li class='colBreak'>Item3</li> 
 
    <li>Item4</li> 
 
    <li>Item5</li> 
 
    <li>Item6</li> 
 
    <li>Item7</li> 
 
    <li>Item8</li> 
 
    <li>Item9</li> 
 
    <li>Item10</li> 
 
    <li class='colBreak'>Item11</li> 
 
    <li>Item12</li> 
 
    <li>Item13</li> 
 
    <li>Item14</li> 
 
</ul>

CSS（在Chrome，甚至在IE /邊緣效果很好，但在Firefox失敗）：

這裏期望得到的結果是一個3欄佈局（我得到）其中Item1，Item3和Item11是3列中的頂部元素。

在Chrome中，它看起來很瀟灑： Chrome Output

在Firefox中，我得到項目1中的粗體文字，項目3 &第11項 FireFox Output

JS Fiddle

感謝您的任何援助。

來源

2016-03-16 E Tarasewicz

請參閱：http://caniuse.com/#search=column –

@Gyryrillus，這確實指出了這個問題，但我還沒有一個可行的選擇。 –

目前沒有用於Firefox的東西。你需要一些棘手的Javascript來插入空容器來填充列的底部，然後才能看到站在下一列頂部的元素，並將其分解爲多個ul或......（ –

我能夠得到它與輸出，額外的類和一些jQuery的工作。相反，表明在colBreaks是的，我分配每個導航項目的列級

<ul class='c3'> 
    <li class='col1'>Item1</li> 
    <li class='col1'>Item2</li> 
    <li class='col2'>Item3</li> 
    <li class='col2'>Item4</li> 
    <li class='col2'>Item5</li> 
    <li class='col2'>Item6</li> 
    <li class='col2'>Item7</li> 
    <li class='col2'>Item8</li> 
    <li class='col2'>Item9</li> 
    <li class='col2'>Item10</li> 
    <li class='col3'>Item11</li> 
    <li class='col3'>Item12</li> 
    <li class='col3'>Item13</li> 
    <li class='col3'>Item14</li> 
</ul>

然後，使用jQuery wrapAll方法，我可以添加自舉類分解成列：

$(".c3 .col1").wrapAll("<div class='col-sm-4' />"); 
$(".c3 .col2").wrapAll("<div class='col-sm-4' />"); 
$(".c3 .col3").wrapAll("<div class='col-sm-4' />");

這將所有.col1項目分組爲<div>，並且沒有使用間隔符而得到了休息。

Working (in FireFox) JS Fiddle

如果任何人有更好的方法來做到這一點，我很樂意看到它。但是，這是針對這個特定問題的。

來源

2016-03-17 22:29:03

FireFox中的CSS列中斷

回答

相關問題