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（或将它们设置为none），则表现良好。

如果我删除变换偏斜，则表现良好

如果删除列，则表现良好。

如果我将transform：translateZ（0）添加到多列元素#formulario，它表现不错。

最后一个选项似乎是一个很好的黑客，让我能够优雅地设计我的设计。但我想知道这里真正的问题是什么，为什么会发生？为什么只在Chrome中？

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

Answer 1

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

如果您想保持html相同，可以从position:relative移除#formulario label，这样可以解决您的问题。

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

此外，可能值得搜索＆＃34;列数＆＃34;在https://code.google.com/p/chromium/issues/list上查看是否有其他人有同样的问题，如果不是，我建议您登录。</ p>

Answer 2

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

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

现场直播here

涉及列和表单的Chrome Bug

2 个答案: