绝对定位的 DIV 跨浏览器不一致

Question

我对绝对定位的 DIV 有疑问 - 它在不同浏览器中的位置并不完全相同。问题是我的大部分内容是由 JSP 文件生成的，我必须应用 CSS 并在该文件之外的 CMS 中创建我的内容。以下是代码的结构：

                <div id="automatic-container">
                 <div class="one">
                 <div class="oneWeird"></div>
                 <div id="content-container">
                     <div id="some-content1"></div>
                     <div id="some-content2"></div>
                 </div>
                <div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div>  
                </div>
                </div>

除了“内容容器”之外的所有内容都是由 JSP 文件自动生成的。 “绝对位置” div 中的内容应放在“内容容器”中的内容之上，并位于特定位置。 oneWeird 是由 JSP 创建的一个 div，我可以说它似乎没有任何用途......

我已经应用了以下 CSS，并且绝对位置 DIV 在每个浏览器中都偏离了几个像素（我检查了 Chrome、IE7、8、9、FF、Safari）。它在 Chrome、Safari 和 IE8 中匹配。在 FF 中大约高 3 个像素，在 IE 9 中高出 5 个像素，在 IE7 中下降了大约 10 个像素。

                #automatic-container{position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;}
                #automatic-container div.one div.oneWeird{display: none;}
                #content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;}
                #some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;}
                #some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;}
                #absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;}

关于如何使绝对位置 DIV 在浏览器中保持一致的任何想法？我在 SO 或其他地方找到的文章都没有帮助。我尝试将定位更改为相对并使用 z-index，但这也产生了不一致的结果。当我通过在线验证运行它时，我的代码也是干净的。

提前感谢您的帮助。

Answer 1

在应用普通 css 之前，对您的页面应用重置：http://meyerweb.com/eric/tools/css/reset/ 或 Normalize.css http://necolas.github.com/normalize.css/。我几乎可以保证您遇到的问题是不同浏览器使用的不同默认样式。

重置的作用是在您开始应用自己的样式之前将所有样式设置为基线。因此，如果 Chrome 对元素应用 x 数量的边距，而 IE 应用 Y 数量，则重置会将它们都设置为 0。缺点是您使用的每个元素都必须重新设置样式。例如列表不再有默认样式，块引号等也没有。

Normalize.css 对新手来说更容易使用，因为它为所有东西设置基本样式，就像重置一样，但它为大多数东西提供了一种样式，而不仅仅是将它们设置为 0，所以你的列表仍然会缩进项目符号，但它们在所有浏览器上看起来都一样（或应该）。