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

【问题标题】：How to render same margins for every browser?如何为每个浏览器呈现相同的边距？
【发布时间】：2012-06-15 10:27:14
【问题描述】：

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

很遗憾，浏览器不同意每个 div 和 input 标签之间的空间。

我发现了一个输入标签的技巧，通过使用 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 Firefox 一致，在 Linux 或 Windows 上运行。

我一开始以为是浏览器引擎的问题，Gecko的渲染和Webkit不同，但是如果Windows和Linux版本的火狐不一样，应该是别的原因。

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

【问题讨论】：

没有太多原因的答案，但这是使用 CSS 重置的一个很好的理由。 cssreset.com
好的，感谢 stackoverflow 社区，CSS 重置，我学到了一个新东西 :) 使用 Eric Meyer 的重置，它会弄乱我的画布位置 jsfiddle.net/92gPY/6 并使用 Yahoo 库，它不会改变事情jsfiddle.net/92gPY/7 现在我尝试只添加迈耶的 div 重置但问题仍然存在jsfiddle.net/92gPY/8 有人有一个可行的解决方案吗？抄送@MoinZaman

【解决方案1】：

为什么：因为规定的样式表没有规定像边距这样的间距。

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

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

【讨论】：

谢谢，但我不能让它工作stackoverflow.com/questions/10998358/…
@baptx 你做错了。包括整个重置样式表，然后明确声明您需要的所有属性都是非零的。
哈哈谢谢大家，它现在正在工作！ jsfiddle.net/92gPY/26 Eric Meyer 的 CSS 重置成功了，我必须将 tr & td vertical-align 设置为“top”。在此之后，我必须找到 div 的良好高度/边距像素，以匹配我在画布图像上绘制点时设置的像素间隔:) 只是一个问题，我听说使用 CSS 重置不是一个很好的做法因为它正在删除所有样式，并且有些样式是为了使网页看起来更好。有人说最好使用基本样式表，例如fvsch.com/code/base-stylesheet，它只会更正样式。你怎么看？
@baptx 两者之间没有真正的区别 - 两者都只是所有元素的综合样式表。我更喜欢重置，因为这样会显式设置任何非零值。

【解决方案2】：

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

这里有两个流行的重置：

【讨论】：