如何使用 CSS 列数修复 Chrome 错误？答案

【问题标题】：How to fix Chrome bug with CSS column-count?如何使用 CSS 列数修复 Chrome 错误？
【发布时间】：2020-09-23 19:12:15
【问题描述】：

Chrome 中的列计数有什么解决方案吗？

在 Firefox 中它可以工作：

在 Chrome 中不是：

Codepen：https://codepen.io/online123/pen/qBbErZg

.box 会有不同的高度（取决于里面的文字、图片）。 .box 宽度是并且应该保持静态（320 像素）。当我使用 display:block;对于 .box 然后边距分散，并且盒子被分成许多列（break-inside:avoid；没有帮助）。列数的变化取决于屏幕宽度。

.content {
	min-height:100%;
    margin-top:100px;
}

.main {
	width:70%;
	margin:auto;
	padding-top:60px;
	padding-bottom:10px;
}

.under {
	width:70%;
	margin:auto;
	text-align:center;
	overflow:auto; 
    justify-content:center;
	position:relative;
	column-count:5;
	-moz-column-count:5;
    -webkit-column-count:5;
	-webkit-column-fill:balance;
	-moz-column-fill:balance;
	column-fill:balance;
}


.box {
	text-align:center;
	width:320px;
	padding:10px;
	margin:10px;
	display:inline-block;
	border: 1px solid white;
	background-color:#363636;
	position:relative;
	-webkit-column-break-inside:avoid;
	page-break-inside:avoid;
	break-inside:avoid;
    -moz-column-break-inside:avoid;
    column-break-inside:avoid;
}

@media screen and (max-width: 2450px) {
		.under {
			column-count: 4;
			-moz-column-count:4;
			-webkit-column-count:4;
		}
}

@media screen and (max-width: 1900px) {
		.under {
			column-count: 3;
			-moz-column-count:3;
			-webkit-column-count:3;
		}
}

@media screen and (max-width: 1400px) {
		.under {
			column-count: 2;
			-moz-column-count:2;
			-webkit-column-count:2;
		}
}

@media screen and (max-width: 950px) {
		.under {
			column-count: 1;
			-moz-column-count:1;
			-webkit-column-count:1;
		}
}

@media screen and (max-width: 700px) {
	.main {
		width:95%;
		}
	.under {
		width:95%;
		}
}

.h80 {
  height:80px;
}

.h150 {
  height:150px;
}

.h300 {
  height:300px;
}

.h500 {
  height:500px;
}

.h1000 {
  height:1000px;
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
  background-color:black;
}

<div class="content">
<div class="under">
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h500"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
</div>
</div>

【问题讨论】：

标签： html css google-chrome css-multicolumn-layout

【解决方案1】：

这不是一个好的解决方案，但您可以仅为 chrome 指定样式并指定 .box 是 display: grid 这将修复错误，并将 display: inline-box 留给 firefox，但我强烈建议检查它其它浏览器。而且您不能将display: grid 用于firefox，因为从字面上看，在以前的版本中它不能正常工作。总而言之，最好使用不同的机制，特别是如果它应该适用于菜单，那么 cls 就会出现问题。

要为演员指定样式，您可以使用此专利_: lang (x) :: - internal-media-controls-overlay-cast-button

【讨论】：