CSS3列：Firefox和Chrome不同的行爲

我有一個無序列表中的網站基本上是喜歡CSS3列：Firefox和Chrome不同的行爲

 <ul class="subnav-links"> 
     <li class=""> 
      <a href="/de/t/new">New In</a> 
     </li> 
     <li class=""> 
      <a href="/de/t/sale">Sale</a> 
     </li> 
     <li class=""> 
      <a href="/de/pages/best_looks">Looks</a> 
     </li> 
     .... more lis omitted 
    </ul>

和css：

.subnav-links { 
    -webkit-columns: 8 auto; /* Chrome, Safari, Opera */ 
    -moz-columns: 8 auto; /* Firefox */ 
    columns: 8 auto; 
}

在此website鉻正確地顯示在8列的列表項但Firefox只顯示1列。

這是爲什麼？我該如何解決它？

P.S.我還在div.subnav-columns中包裝了subnav-ul，並使用columns屬性對div進行了樣式設置，但Firefox始終只顯示一列。

來源

2016-09-20 StandardNerd

在網站 – dippas

中沒有'subnav-colunms'是的，這是嘗試使用columns屬性對div進行樣式設計而不是ul，但兩者都不在Firefox中工作，因此我將其刪除。 – StandardNerd

好吧，我發現它。我在樣式表中嵌套了一個錯誤的嵌套@-moz-document url-prefix()。

來源

2016-09-22 13:09:05 StandardNerd

Hav'nt您嘗試使用這一點，並把它應用到CSS：

.subnav-links li { 
    display:inline-block; width:100% 
}

來源

2016-09-21 08:00:51 SaurabhLP

是的，有了這個列表項是水平排列行，但我希望列表項被垂直堆疊在8列。 – StandardNerd

表示您希望所有列表項目的高度相同。哪些可以使列堆疊？ – SaurabhLP

我不確定我是否正確理解您最後的評論。我幾分鐘前在評論中提到的是列表項目的排序順序。使用CSS3列屬性，排序順序是填充列（垂直堆疊）後列中的列表項。在您的第一條評論中使用您的方法時，列表項將在行後填充行。 – StandardNerd

CSS3列：Firefox和Chrome不同的行爲

回答

相關問題