CSS Columns 适用于除 Firefox 之外的所有浏览器答案

【问题标题】：CSS Columns works with all browsers except FirefoxCSS Columns 适用于除 Firefox 之外的所有浏览器
【发布时间】：2017-06-19 05:31:21
【问题描述】：

我似乎无法让 Firefox 与我的 3 个专栏合作。它适用于所有其他浏览器。请查看http://www.usslittlerock.org/Marines_Workpage.html。除了相关的 CSS 和 HTML，我从页面上剥离了所有内容。我之前使用过列没有问题，但这次我使用了混合表。布局的外观需要保持不变。我实际上更愿意消除 TABLES，但我不知道如何单独使用 CSS 来保持布局样式。我已经从这个站点尝试了许多不同的解决方案，但没有一个有效。感谢您提供的任何建议。

【问题讨论】：

欢迎您！我们需要代码here——不仅仅是链接。请提供minimal reproducible example。
@DaniSpringer 在我看来，这正是他所链接的。这与小提琴或内联代码有什么不同？
.marines { -webkit-column-count: 3; /* Chrome, Safari, Opera / -webkit-column-gap: 20px; / Chrome、Safari、Opera / -webkit-column-rule: 30px solid #cc0000; / Chrome, Safari, Opera / -moz-column-count: 3; / 火狐 / -moz-column-gap: 20px; / Firefox / -moz-column-rule: 30px solid #cc0000; / Firefox */ column-count: 3;列间距：20px；列规则：30px 实心#cc0000;

标签： css

【解决方案1】：

http://caniuse.com/#search=column-gap 报告，在已知问题下：

Firefox 不会将表拆分为列

对不起。

好新，你可以让你的代码大部分保持不变，但用 div 替换所有内容。（这是我最简单的解释方式）：

用你喜欢的编辑器做一些简单的文本替换：

<table> --> <div class="table">
<th>    --> <div class="th">
<tr>    --> <div class="tr">
<td>    --> <div class="td">
<tbody> --> <div class="tbody">
... and the equivalent </table> --> </div>, etc.

更改你的 CSS：

.marines table --> .marines div.table
.marines table th --> .marines div.th
.marines table td --> .marines div.td

在现有的 css 中添加一些新的位：

.marines div.td {
     ....
     display: inline-block;
     width: 52%;
}
.marines div.th {
    ....
    display: inline-block;
    width: 52%;
}
.marines div.td:nth-of-type(2) {
    width: 20%;
}
.marines div.td:nth-of-type(3) {
    width: 25%;
}

它适用于所有浏览器（这不是一个完整的答案——你仍然需要处理标题和索引字母中的粗体文本，但我想你明白了。）

【讨论】：

好吧，我认为 TABLES 是问题所在。我找不到单独使用 CSS 的方法。我知道列表项会起作用，但布局必须保持在 3 个标题下的中心。有什么建议吗？
在进行了上述更改之后（我想我都明白了），firefox 现在遵循列规则，但我的布局百分比很糟糕。我重新上传了对这个位置 usslittlerock.org/Marines_Workpage2.html 进行更改的页面。
你错过了一个，吉姆：将 width: 52% 添加到第一个 .marines div.th CSS。（我知道你最初有 55%，但 52% 似乎更适合我。）
我做了那个改变，但布局仍然到处都是。如果您回头查看原始页面usslittlerock.org/Marines_Workpage.html，您会看到它是如何排列的——只是在 Firefox 中不起作用。我很高兴您的建议为我提供了一个有效的 Firefox 页面，但布局有点混乱。另外，我想我遗漏了一些其他的东西——当我将代码从更改为
时，我意识到我从没有任何用于的 css。如果您对我不耐烦并且不回复，我会理解的。不过，我非常感谢您的帮助。
我的错误，我遗漏了与 div.td 关联的width:52%（除了 div.th）。 div.tr 不需要任何东西。我已经更新了上面的回复。