立场：Chrome和Firefox绝对不兼容答案

【问题标题】：position:absolute incompatibility in Chrome and Firefox立场：Chrome和Firefox绝对不兼容
【发布时间】：2013-03-12 13:39:44
【问题描述】：

我的问题是：我有一个表格，当然是<input>。但在所有输入中，Chrome 和 Firefox 之间的兼容性都有一点问题。我相信 Chrome 与 Firefox 相比增加了 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;
}

我能做什么？提前谢谢大家！

【问题讨论】：

你能准确说出增加了什么吗？我只能看到 Chrome 和 FF 之间的一个区别 - 它是占位符位置。 jsfiddle.net/RGZch
您是否尝试过先将边距和内边距设置为 0
Morpheus：与 Firefox 相比，Chrome 的顶部似乎增加了 2px。 sam_7_h：不，我会试试的。谢谢。
在开始设计时使用重置 css。
桑迪普：像这样？ meyerweb.com/eric/tools/css/reset

标签： html css google-chrome firefox incompatibility

【解决方案1】：

把它放在 CSS 的顶部。

*
{
    margin:0;
    padding:0;
}

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

【讨论】：

请大家看问题。我计算了，以及我的感受，正好有两个像素的差异！ img607.imageshack.us/img607/4907/problemp.png
是的，我知道。我同意这是两个像素的差异。

【解决方案2】：

通过在下面使用，您将给 #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;}

【讨论】：

但这只会移动整个表单的位置。 2 个像素的差异仍然存在。
而这个2像素的问题在所有的表单元素中都存在。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

哈哈哈哈哈哈哈哈哈哈哈