2

我在使用 Safari（9.0.1）并在多列上显示文本时遇到问题：它只是将行水平（！）分开，以便上升线保留在前一行（底部）中，其余字母显示在新列的顶部（见随附的屏幕截图）。这种行为使列功能基本上无用。同时 Firefox (42.0) 和 Chrome (47.0.2526.80) 完全可以使用 CSS。

这是 Safari 特有的问题，是我做错了什么还是我的系统出了问题？

并且（另外）：Webkit-browser 计算不同是否正常？在 1280px 宽的显示器上，Firefox 最多显示 4 列（4x (300px + 2x 10px)），而 Webkit 浏览器坚持 3 列（当将列宽减小到 296px 时，它们确实显示 4 列，尽管这只是总结到 1264 像素）。

编辑：我添加了整个文本的另一个屏幕截图，该屏幕截图分布在不同的列中，并添加了问题的标记。

html {
	overflow: display;
}

.container {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

.content {
	margin: 0 auto;
	display: block;
	padding: 0 10px;
	-moz-column-width: 300px;
	-webkit-column-width: 300px;
	column-width: 300px;
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
	column-fill: balance;
}
<div class="container">
  <div class="content">
    <h1>Headline Headline</h1>
    <h2>Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis tempor rutrum. Sed eu odio rhoncus, molestie sapien eget, hendrerit elit. Aliquam at tellus a dui lacinia euismod a et dolor. Integer tempor leo ac quam sodales, sit amet sollicitudin risus facilisis. Donec sed purus non sapien consequat egestas. Curabitur laoreet aliquam leo, id vestibulum dui ornare sed. Nullam lectus felis, malesuada ac congue quis, suscipit vel ante. Mauris id tristique dui, quis malesuada enim. Curabitur neque quam, pellentesque ut libero sed, aliquam malesuada ligula.</p>
	<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam a dapibus mi, vel adipiscing lacus. Vivamus adipiscing urna eget ligula gravida, nec ultrices lorem tincidunt. Pellentesque arcu nulla, viverra ut dui et, fermentum gravida justo. Nullam eget ligula quis ligula convallis fringilla et vitae ligula. Sed ornare metus dictum, consectetur urna in, iaculis magna. Ut purus nibh, pretium id placerat sit amet, interdum ornare eros. Etiam ac viverra lectus, in gravida orci. Phasellus aliquam sapien vitae porttitor volutpat.</p>
	<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis tempor rutrum. Sed eu odio rhoncus, molestie sapien eget, hendrerit elit. Aliquam at tellus a dui lacinia euismod a et dolor. Integer tempor leo ac quam sodales, sit amet sollicitudin risus facilisis. Donec sed purus non sapien consequat egestas. Curabitur laoreet aliquam leo, id vestibulum dui ornare sed. Nullam lectus felis, malesuada ac congue quis, suscipit vel ante. Mauris id tristique dui, quis malesuada enim. Curabitur neque quam, pellentesque ut libero sed, aliquam malesuada ligula.</p>
	<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam a dapibus mi, vel adipiscing lacus. Vivamus adipiscing urna eget ligula gravida, nec ultrices lorem tincidunt. Pellentesque arcu nulla, viverra ut dui et, fermentum gravida justo. Nullam eget ligula quis ligula convallis fringilla et vitae ligula. Sed ornare metus dictum, consectetur urna in, iaculis magna. Ut purus nibh, pretium id placerat sit amet, interdum ornare eros. Etiam ac viverra lectus, in gravida orci. Phasellus aliquam sapien vitae porttitor volutpat.</p>
  </div>
</div>

细节

整体展示

4

0 回答 0