Question

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

                <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

在应用普通CSS之前，将重置：http://meyerweb.com/eric/tools/css/reset/或Normalize.css http://necolas.github.com/normalize.css/应用于您的网页。我几乎认识到你所遇到的是不同浏览器使用的不同默认样式。

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

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

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

1 个答案: