Question

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

以下是HTML的一个示例：

<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-catalog-composer0的div）。 class 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设置。

感激地收到任何想法！

P.S。我最终成功使用flexbox来提供必要的分栏符。

Answer 1

我还没有使用您的TABLE代码进行测试，但是使用项目符号列表，如果您在外部元素（UL）上使用-webkit-columns CSS而在内部使用-webkit-column-break-inside （LI）它在Chrome 64中可以正常工作。也许使用列表而不是表格（如果可能的话）。

Chrome 64的CSS列中断问题

1 个答案: