Question

我实施了以下水平布局列表。

list.html

<div class='options'>
  <div><input type='checkbox'><label>Check 01</label></div>
  <div><input type='checkbox'><label>Check 02</label></div>
  ...
</div>

的style.css

.options {
  width: 345px;
  height: 100px;
  border: 1px solid #ddd;
  padding: 5px;

  -moz-column-fill: auto;
  -moz-column-width: 150px;
  -moz-column-gap: 0px;
  -webkit-column-fill: auto;
  -webkit-column-width: 150px;
  -webkit-column-gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;
}

我实现了布局。但是，当我尝试使用Google加载项样式表设置输入元素的样式时，复选框会在我滚动时重叠。

以下是Google加载项样式表： https://ssl.gstatic.com/docs/script/css/add-ons.css

不确定它是否相关，但实施是在IFRAME沙盒模式下使用Apps Script HTML服务。

这是jsfiddle：http://jsfiddle.net/aj8wa6xf/

我知道我在布局上犯了一个错误。无法弄清楚是什么。有人可以指出我的错误吗？谢谢。

Answer 1

您可能发现了Chrome渲染错误。适用于Safari。不言而喻，这甚至还没有得到IE的广泛支持。

这是 [caniuse.com] 1

上Chrome和多列布局的已知问题之一

据报道，Chrome会错误地计算容器高度，并且通常会打开边距，填充，并且可以显示1px的   上一栏底部的下一栏。

多列尚未作为任何规范的一部分采用。这是一个发布候选人充其量。浏览器中的实现有时会导致规范，有时会跟随唤醒

CSS3列填充水平溢出

1 个答案: