Question

我的问题是：我有一张表格，当然还有<input>。但是在所有输入中都存在Chrome和Firefox之间的兼容性问题。我认为与Firefox相比，Chrome在顶部增加了2个像素。我要传递代码。我该怎么办？在webkit和moz中使用CSS中的不同值？这是我的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

通过下面的使用，你给#FirstName_container一个绝对位置：

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

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

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

Answer 3

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

Answer 4

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

位置：Chrome和Firefox中的绝对不兼容性

4 个答案: