0

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

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

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

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

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

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

4

2 回答 2

3

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

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

来源：Normalize.css

另外，请检查Initializr。它提供了更多功能，包括 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;
}

来源： http: //meyerweb.com/eric/tools/css/reset/

于 2012-07-08T23:17:02.107 回答
0

尝试使用重置样式表，然后自己设置所有样式。

我的重置样式表为大量标签（包括 P）设置了垂直对齐样式：基线；

这可能会有所帮助。

于 2012-07-08T23:25:03.963 回答