Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 绝对定位的DIV在浏览器之间不一致_Css_Debugging_Cross Browser_Positioning - Fatal编程技术网

Css 绝对定位的DIV在浏览器之间不一致

Css 绝对定位的DIV在浏览器之间不一致,css,debugging,cross-browser,positioning,Css,Debugging,Cross Browser,Positioning,我对绝对定位的DIV有一个问题——它在不同浏览器中的位置不完全相同。问题是我的大部分内容都是由JSP文件生成的,我必须应用CSS并在CMS中创建我的内容,在这个文件之外。下面是代码的结构: <div id="automatic-container"> <div class="one"> <div class="oneWeird"></div>

我对绝对定位的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>
关于如何在不同浏览器中使绝对位置DIV保持一致,有什么想法吗?我在SO或其他网站上找到的文章都没有帮助。我曾尝试将定位更改为相对并使用z索引,但这也产生了不一致的结果。我的代码在通过在线验证时也是干净的

提前感谢您的帮助

在应用常规css之前,对页面应用reset:或Normalize.css。我几乎是gaurantee,你遇到的是不同浏览器使用的不同默认样式

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


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

制作一个,我会尽力提供帮助!谢谢你的建议!我使用Meyer的重置作为起点并进行了编辑,因此它只会影响我工作的CMS区域内的内容。
                #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;}