P标签在Firefox中出现比在Internet Explorer中低，使用CSS

我做了一个在Internet Explorer上看起来很完美的网站，但是当它用Firefox加载时，某些元素是不一致的。P标签在Firefox中出现比在Internet Explorer中低，使用CSS

例如，将出现在坐标20,20上的ap标签将出现在坐标20,40上的firefox中。出于某种原因，firefox更改了我的p标签的'top'属性，使得它们出现在Firefox中“低于”，比在ie中低。请注意，'left'属性'仍然不受阻碍，但'top'（或y坐标）的值每次增加约20个像素！

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

下面是我用于每个p标签的代码。如果您要在网页中使用相同的代码，您会清楚地看到，p标记在Firefox中显示得比在任何时候都低。

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

为什么我在Firefox中出现的30个像素的p标签，比在Internet Explorer？

来源

2012-07-08 James Diaz

你应该修复'background-color'css属性，你忘了'＃'，它应该是'background-color：＃0033dd' – Luis 2012-07-08 23:14:06

默认情况下，每个浏览器都有自己的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-08 23:17:02 abhshkdz

浏览器默认是有原因的。如果你使用CSS重置，你应该记得设置新的明智的默认值（例如''p'上的'margin：0'可能只有在你'text-indent'时才是合理的）。这有效地使重置无用，但meh。 – You 2012-07-08 23:24:09

这是一个meyerweb v 2.0重置，如果提及原作者的信用，即使他将其放入公有领域也不错 - 请参阅http://meyerweb.com/eric/tools/css/reset/ – fvu 2012-07-08 23:27:42

@You，我一般使用Initializr。我知道基本的重置是在那里，所以我谷歌搜索，并粘贴了我能找到的第一个。 – abhshkdz 2012-07-08 23:29:21

尝试使用重置样式表然后自己造型。

我的重置样式表使用vertical-align设置了一大堆标签（包括P）：baseline;

这可能有帮助。

来源

2012-07-08 23:25:03 Qsario

P标签在Firefox中出现比在Internet Explorer中低，使用CSS

回答

相关问题