css - 绝对定位的 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>

除了“content-container”之外的所有内容都是由 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

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

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

Normalize.css 对新手来说更容易使用，因为它为所有内容设置基本样式，就像重置一样，但它为大多数内容提供样式，而不是仅仅将它们设置为 0，因此您的列表仍将缩进子弹，但它们在所有浏览器上看起来都一样(或者应该。)