调整窗口宽度的大小时,您可以在IE和Firefox中看到布局的跳跃/中断.下面是一个例子.坚持下去导致多列错位对齐的缺陷！？
对不起我的胡子改变自我自我：我忘了刮胡子,整天盯着这个问题,没有时间整理.一旦这个问题解决了,我向你保证,虽然这里有干净利落的剃光肖像！
Internet Explorer 11上的大多数屏幕宽度都存在更多对齐问题.好奇的Safari和Chrome在所有浏览器屏幕宽度上都可以完美地显示布局,没有破损.
#multicolumn {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 53px;
-moz-column-gap: 53px;
-webkit-column-gap: 53px;
column-rule-color: #EEE;
-moz-column-rule-color: #EEE;
-webkit-column-rule-color: #EEE;
column-rule-style: solid;
-moz-column-rule-style: solid;
-webkit-column-rule-style: solid;
column-rule-width: 1px;
-moz-column-rule-width: 1px;
-webkit-column-rule-width: 1px;
}
#multicolumn p:first-letter{
float:left;
font-weight:normal;
font-size:44px;
margin: 7px 1px 0px 0px;
line-height:27px;
background-color:#AEE;
}
解决方法
主要是因为缺少对break-before,break-after,break-inside属性的支持,IE 10和专有-webkit-column-break- *属性除外(参见：CSS3 Multiple column layout).
(你也可以看看我对这个问题的回答：IE (11) improper handling of CSS multi-columns?)
另外你必须记住,有一个所谓的“multi-column pseudo-algorithm”,它似乎被你的：首字母选择器混淆了.
您可以通过使用带有类别属性的span元素来避免此问题.
但由于第一个字母的大小比文本的其他部分大,因此出现了另一个问题.
可能会发生带有首字下沉的段落开头的(单个)文本行可能适合前一列,而首字下沉(大约是普通文本的两倍)可能不会.
要避免这种不必要的行为,您必须使用另一个span元素,该元素至少包含可能适合单行(文本)的文本！
并给这些span元素一个显示：inline-block;解决了这个问题.
关于Amir5000答案的一句话：虽然我提出的解决方案还需要一些额外的跨度元素,但它不会使用“纯粹的表示性标记”,这也可能产生不需要的空行.
但正如开头所说,使用多列至少非常“棘手”并且很难在浏览器和/或不同视口宽度上获得预测结果.
