使用CSS，firefox中的P标签比Internet Explorer中的标签低 [英] P tags appearing lower in firefox than in internet explorer, using CSS

问题描述

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

I made a website that looks perfect on Internet Explorer, but when it is loaded with Firefox, certain elements are out of alignment.

例如，ap标签会出现在坐标20、20上，会出现在firefox中的坐标20、40上。出于某种原因，firefox更改了我的p标签的'top'属性，以使它们在firefox中的显示比在ie中的较低。请注意， left属性保持不受阻碍，但是 top（或y坐标）的值每次都会增加约20个像素！

For example, a p tag that would appear on the coordinates 20, 20, would appear in firefox on the coordinates 20, 40. For some reason, firefox changes the 'top' attribute of my p tags, such that they appear "lower" in firefox, than in ie. Please note that the 'left' attribute' remains unhindered, but the value for the 'top' (or y coordinate) is increased by about 20 pixels, everytime!

I想知道为什么我的P标签会出现在Internet Explorer的适当位置，而在firefox中却较低？

I would like to know why my P tags appear in their proper locations in Internet Explorer, but are lower in firefox?

下面是我为每个p标签使用的代码。如果您要在网页中使用相同的代码，那么您会清楚地看到，p标记在firefox中的出现要比在ie中的低。

Below is the code I used for each p tag. If you were to use this same code in a web page, you would see clearly that the p tag appears lower in firefox, than in i.e. everytime.

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

为什么我的p标签在firefox中出现的像素比屏幕低30像素

推荐答案

每个浏览器默认都有自己的CSS。为了解决这个问题，优良作法是在应用自定义CSS之前使用某种CSS规范化（由@You指出）。 建议使用CSS标准化，而不要使用完全重置，因为

Each browser has its own CSS applied by default. To counter this, it is good practice to use some sort of CSS normalization (as pointed out by @You) before applying custom CSS. CSS normalization is recommended over an outright reset because it

• 与许多CSS重置不同，它保留有用的默认值。


• 标准化各种元素的样式。


• 更正错误和常见的浏览器不一致。

来源： Normalize.css

另外，请检查 Initializr 。它提供了更多功能，包括IE6 +兼容性/后备功能等。

Also, do check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.

否则，您可以使用基本的CSS重置，

If not that, you could use a basic CSS reset,

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/

这篇关于使用CSS，firefox中的P标签比Internet Explorer中的标签低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！