html - 立场：Chrome和Firefox绝对不兼容

Question

我的问题是：我有一个表格，当然，我输入了<input>. 但在所有输入中，Chrome 和 Firefox 之间的兼容性都有一点问题。我相信与 Firefox 相比，Chrome 的顶部增加了 2px。我要传递密码。我应该怎么办？在CSS中为webkit和moz使用不同的值？这是我的 HTML：

<div id='FirstName_container'>
   <input type='text' name='FirstName' id='FirstName' value='' size='20' class='name1' placeholder="First name"/>
</div>

这是CSS：

#contact_form1 #FirstName_container {
    position:absolute;
    left:152px;
    top:12px;
    z-index:5;
}

我可以做什么？提前谢谢大家！

Answer 1

把它放在 CSS 的顶部。

*
{
    margin:0;
    padding:0;
}

这将使所有边距和填充默认为零。我将它添加到每个项目的开头，然后在需要时更改单个边距或填充。

Answer 2

使用 span 而不是绝对位置的 div 时最常见的错误。如果您使用 div 元素，根据我的经验，您通常会看到对所有浏览器的更好兼容性。

Answer 3

通过在下面使用，您将给 #FirstName_container 一个绝对位置：

#contact_form1 #FirstName_container {
    position:absolute;
    left:152px;
    top:12px;
    z-index:5;
}

您应该为 #FirstName_container 的父级提供一个相对位置以及 left 和 top 值。这应该有助于解决这个问题。

#contact_form1{position:relative;top:XXpx; left:XXpx;}

Answer 4

我设法解决了这个问题！刚刚添加margin: 0;到所有元素。感谢所有帮助过的人。