Question

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

Answer 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%;
}

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

CSS Columns适用于除Firefox

1 个答案: