使用 CSS，P 标签在 Firefox 中的显示位置低于在 Internet Explorer 中的显示位置

我制作了一个在 Internet Explorer 上看起来很完美的网站，但是当用 Firefox 加载时，某些元素不对齐。

例如，出现在坐标 20、20 上的 p 标签在 Firefox 中会出现在坐标 20、40 上。出于某种原因，Firefox 更改了我的 p 标签的“顶部”属性，使得它们在火狐，比IE。请注意，“左”属性保持不受阻碍，但“顶”（或 y 坐标）的值每次都会增加约 20 个像素！

我想知道为什么我的 P 标签在 Internet Explorer 中出现在正确的位置，但在 Firefox 中却出现在较低的位置？

下面是我用于每个 p 标签的代码。如果您要在网页中使用相同的代码，您会清楚地看到 p 标签在 Firefox 中显示的位置低于 i.e. 每次。

p.myparagraph
{position: absolute;
 left:     20px;
 top:      170px;
 width: 20px;
 height: 19px;
 background-color:0033dd;
}

为什么我的 p 标签在 Firefox 中比在 Internet Explorer 中低 30 像素？

默认情况下，每个浏览器都有自己的 CSS。为了解决这个问题，在应用自定义 CSS 之前，最好使用某种 CSS 规范化（如 @You 所指出的）。建议使用 CSS 规范化而不是彻底重置因为它

• 与许多 CSS 重置不同，保留有用的默认值。
• 标准化各种元素的样式。
• 纠正错误和常见的浏览器不一致问题。

Source: 规范化.css http://necolas.github.com/normalize.css/

另外，请检查一下初始化 http://www.initializr.com/。它提供了更多功能，包括 IE6+ 兼容性/后备等。

如果不是这样，你可以使用基本的 CSS 重置，

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Source: http://meyerweb.com/eric/tools/css/reset/ http://meyerweb.com/eric/tools/css/reset/