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中遇到了非常令人沮喪的多列布局錯誤，似乎沒有人關心它;在我身邊，我很樂意多列支持變得更加穩定。