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

回答

相關問題