html - Chrome 64 的 CSS 分栏问题

Question

我无法让 Chrome 64 正确地进行分栏。

这是一个 HTML block 示例:

<tr><TD>
<div class="keeptogether">
<table class="header">
<tr><td><a href=#missing onclick="toggle('general-catalogue-composer0')">
<B>Willoughby Bertie, 4th Earl of Abingdon<font size=-2> (1740 - 1799)
</font></B></a></TD></TR>
<TR><td>
<div id = "general-catalogue-composer0"  style="display: none;">
<table class="detail">
<tr><td>
All hail to the myrtle shade. T.T.T.Kbd..&nbsp;&nbsp;
<a href=http://www.notamos.co.uk/detail.php?scoreid=145425 
target=_blank>Play/print/buy</a>
</td></tr>
<tr><td>
Where shall a hapless lover find. T.T.T.Kbd..&nbsp;&nbsp;
<a href=http://www.notamos.co.uk/detail.php?scoreid=145427
target=_blank>Play/print/buy</a>
</td></tr>
</table>
</div>
</td></tr>
</table>
</div>
</td></tr>

四列包含许多这样的内容，每一列都有一个标题行和不同数量的详细信息行。onclick 函数切换相关标题的详细信息行的显示(即，对于上面显示的特定详细信息行，id 为 general-catalogue-composer0 的 div)。具有 keeptogether 类的 div 不应包含分栏符。

这是相关的 CSS 内容(上面的列表通过类 menuindex 获取其列):

.detail {
    font-size: 8px;
}
.header {
    font-size: 10px;
}
.menuindex, .menuchoral-sacred, .menuchoral-profane, .menuinstrumental {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}
.keeptogether {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

这一切在最新版本的 Edge 和 IE 上都能完美运行 - 当我单击标题时，会出现详细信息行，并且列会自行重新调整，以便在列的顶部没有详细信息行。在 Chrome 上，这根本不会发生 - 显示切换很好，但 Chrome 似乎可以在任何它喜欢的地方添加分栏符。

我的理解是 Chrome 64 应该支持我使用的 CSS 设置。

感谢收到的任何想法!

附言我最终成功地使用 flexbox 提供了必要的分栏符。

Answer 1

我没有用你的 TABLE 代码测试过，但是使用元素符号列表，如果你在外部元素 (UL) 上有 -webkit-columns CSS 并且在内部元素 (LI) 上有 -webkit-column-break-inside ) 它在 Chrome 64 中可以正常工作。也许使用列表而不是表格(如果可能)是一种选择。