css - 涉及列和表单的 Chrome Bug

Question

我有这个 Codepen http://codepen.io/rafaeljuarez/pen/KpXBdB

<div id="cotizacioncontainer" >


<div id="cotizacion" >
<h1>fghgfh</h1>
<p class="resumen">fghfghfgh</p>



<form id="form" name="form1" method="post" action="SVF-emailer.php">
<div id="formulario" class="doscols">
<label>
<span class="moq">Fecha y hora de tu evento</span>
<input type="text" name="fecha" id="fecha">
</label>

<label>
<span class="moq">Lugar de tu evento</span>
<input type="text" name="lugar" id="lugar">
</label>

<label>
<span class="moq">Cuantos niños invitarás?</span>
<input type="text" name="cuantos" id="cuantos">
</label>

<label>
<span class="moq">Edades aproximadas</span>
<input type="text" name="edades" id="edades">
</label>


<label>
<span class="moq">¿qué Plan Deseas?</span>
<select name="plan" id="plan">
<option value="..." selected>Selecciona plan</option>
</select>
</label>

<label>
<span class="moq">¿Qué Servicios extra Deseas?</span>
<select name="extra" id="extra" multiple size="10">
<option value="..." selected>Selecciona plan (Puedes seleccionar varios)            </option>

</select>
</label>

</div>
</form>
</div>
</div>

使用这个 CSS:

#cotizacioncontainer{  transform:skewY(-3deg);
position:relative;
padding:150px 0;
background-color:#000; 
color:#fff!important;}

#cotizacion{ max-width:1000px;
transform: skewY(3deg);
position:relative;
margin-right:auto;
margin-left:auto;}

#cotizacion h1{ font-size:40px;
}

#formulario{column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap:40px;
column-width:auto;
-webkit-column-width:auto;
-webkit-column-gap:40px;
display:inline-block;
width:100%;
overflow:hidden;}

#formulario label {
margin-bottom:20px;
position:relative;
display:block;
color:#fff;
}


#formulario label:focus {
background: rgba(255,255,255,1);
}

#formulario label span.moq {
display: block;
font-size: 19px;
text-transform: uppercase;
margin-bottom:5px;
}

#formulario input, #formulario textarea, #formulario select {
border: dashed 2px #fff;
background-color: transparent;
width: 100%;
padding: 15px;
font-size: 14px;
color: #fff;
box-sizing: border-box;
transition:all 0.3s linear;
}

请注意，该表单在 Chrome 中完全无法使用，但在 Firefox 中可以正常使用。我只是无法解释这是怎么称呼的，或者它是如何或为什么发生的。只知道这很烦人。

当你点击一个字段时，就像你点击了较低的位置一样，比 h1 和 .desc 占据高度的像素的确切数量。

请注意:

如果我删除 h1 和 .desc(或将它们设置为不显示)，它会正常运行。

如果我删除变换倾斜，它会正常运行

如果我删除列，它会正常运行。

如果我将 transform: translateZ(0) 添加到多列元素 #formulario，它就可以正常工作。

最后一个选项似乎是一个不错的 hack，可以让我的设计保持优雅。但我想知道这里真正的问题是什么，为什么会发生？为什么只在 Chrome 中？

我在 Chrome 中遇到了非常令人沮丧的多列布局错误，但似乎没有人关心它；在我这边，我希望多列支持变得更加稳定。

Answer 1

Chrome 似乎错误地计算了 <label>使用 column-count 时子元素的高度.此外，它似乎不喜欢制作子元素 position:relative .

如果你想保持你的html不变，你可以删除position:relative来自 #formulario label这将解决您的问题。

看起来 chrome 目前仍处于 column-count 的实现阶段. https://www.chromestatus.com/features/6526151266664448

此外，可能值得在 https://code.google.com/p/chromium/issues/list 上搜索“column-count”看看其他人是否有同样的问题，如果没有，我建议您记录下来。