如何为每个浏览器呈现相同的边距？

Question

我有一个HTML5画布图像，在其中绘制了一些点，并且要在这些点旁边对齐一些div标签和文本输入标签。

不幸的是，浏览器不同意每个div和输入标签之间的空间。

通过使用CSS指定高度，我发现了输入标签的黑手。 现在，每个浏览器的输入标签之间都有相同的空间。 输入标签的默认高度似乎因浏览器而异，这非常奇怪。

我为div标签尝试了相同的操作，但是无法为所有浏览器都正确对齐。

文本输入标签对齐可与所有具有CSS hack的浏览器一起使用： http : //jsfiddle.net/baptx/XcKZj/

div标签的对齐方式因浏览器（为Firefox配置）而不同： http : //jsfiddle.net/baptx/92gPY/

我在Linux上使用Firefox，并且我注意到Windows版本无法提供相同的页边距。 在Linux或Windows上运行时，Chrome也不同意Linux Firefox。 Opera很棒，它始终与在Linux或Windows上运行的Linux Firefox保持一致。

我首先想到的是，归因于Web浏览器引擎，Gecko的呈现方式与Webkit有所不同，但是如果Windows和Linux版本的Firefox不同，则应该是其他方式。

有谁知道它来自哪里以及如何使用div标签解决此问题？

Answer 1

原因 ：因为规定的样式表未规定间距（如边距）。

解决方案 ：使用CSS重置样式表，并在站点范围的样式表中显式声明您自己的默认值。

这是一个带有一些重置的网站： http : //www.cssreset.com/

Answer 2

听起来您需要在样式中包含一个重置CSS。 这将有助于统一（但不能完全消除）浏览器之间的差异。

这是两个常见的重置：

埃里克·梅耶（Eric Meyer）的重设

YUI重置