设置column-width的父元素子项在特定body宽度下点击偏移问题

问题原因 #

你遇到的高度波动不是column-width属性不稳定，而是浏览器亚像素渲染精度和多列布局默认配置共同导致的问题：

• 点击.tag_select元素触发重绘时，浏览器对多列容器的高度计算出现了极小的精度误差，从86px变为85.9833px，进而导致布局偏移。
• 多列布局默认没有配置元素防拆分规则，你给p标签设置的1px上下边距在跨列高度计算时容易放大亚像素误差，加上你使用的等宽字体的字符高度计算本身就容易出现小数像素，两者共同触发了这个问题。

解决方案 #

你可以任选以下一种方案修复，也可以组合使用：

1. 给多列容器补充多列布局专属配置，避免高度计算异常

#ui_tags{
  column-width: 80px;
  margin: 1em;
  padding: 1em;
  background-color: #181818;
  /* 新增以下属性 */
  column-fill: balance;
  break-inside: avoid-column;
  overflow: hidden;
}

2. 固定标签元素的高度，消除边距和内容高度的计算误差

.tag_select {
  cursor:pointer;
  color:#aaa;
  height: 18px;
  line-height: 18px;
  margin: 0;
  padding: 1px 0;
}

3. 直接固定body最小高度，从根源避免高度向下波动

body {
  font-family: monospace;
  background: #222;
  color:#aaa;
  min-height: 86px;
}

column-width是W3C规范内的成熟CSS属性，不需要刻意规避，只要补充对应的布局约束属性即可正常使用。

内容的提问来源于stack exchange，提问作者jokoon