涉及列和表单的 Chrome 错误答案

【问题标题】：Chrome Bug involving columns and forms涉及列和表单的 Chrome 错误
【发布时间】：2015-06-20 19:20:50
【问题描述】：

我有这个 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，它的行为正常。

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

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

【问题讨论】：

标签： css google-chrome multiple-columns css-transforms

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

它看起来像一个浏览器错误。解决方法是添加：

#formulario {
    -webkit-transform: translate3d(0, 0, 0);
}

现场观看here

【讨论】：