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

Question

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

Answer 1

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

Firefox does not split tables into columns

对不起。

很好的新功能，您可以保持代码的大部分完整，但将所有内容替换为 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%;
}

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