Chrome有错误，包括列和形式

问题描述：

我有这个Codepen http://codepen.io/rafaeljuarez/pen/KpXBdB Chrome有错误，包括列和形式

<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中遇到了非常令人沮丧的多列布局错误，似乎没有人关心它;在我身边，我很乐意多列支持变得更加稳定。

答

它看起来像一个浏览器错误。解决的办法是补充：

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

观摩here

答

铬似乎用column-count时错误地计算<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“列数”，看看是否有其他人有同样的问题，如果不是，我建议你登录它。

Chrome有错误，包括列和形式

相关推荐