2
我有这个Codepen http://codepen.io/rafaeljuarez/pen/KpXBdBChrome有错误，包括列和形式
<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（或将它们设置为显示无），它的行为确定。
如果我删除变换歪斜它的行为确定
如果我删除列，它的行为确定。
如果我将transformZ（0）添加到多列元素#formulario中，它表现正常。
最后的选择似乎是一个很好的黑客，让我kkep我的设计优雅。但我想知道这里真正的问题是什么，为什么会发生？为什么只在Chrome中？
我在Chrome中遇到了非常令人沮丧的多列布局错误，似乎没有人关心它;在我身边，我很乐意多列支持变得更加稳定。