html - Chrome 与 FF 和 IE 中的 divs 布局/定位不同

标签 html css cross-browser

IE9 IE9

火狐 V22 enter image description here

Chrome 最新版 27.0... enter image description here

所以你可以看到它在 IE 和 FF 中的位置完全相同,但不知何故 Chrome 在它自己的域中

代码是:

        <div id="DivLogRegForm" style="background-image: url('images/RegF.png'); background-repeat: no-repeat; width: 411px; height: 316px;">
            <div id="DivF_All" style="position:relative; top:70px;">
                <div id="DivF_User" style=" position:relative;top:13px; padding: 0 0 0 0; margin:0 0 0 0">
                    <input type="text" id="TBX_USER" style="width:205px;" />
                </div>
                <div id="DivF_Pass" style=" position:relative;top:37px; padding: 0 0 0 0; margin:0 0 0 0">
                    <input type="password" id="TBX_Pass" style="width:205px;" />
                </div>
                <div id="DivF_ConfPass" style=" position:relative;top:57px; padding: 0 0 0 0; margin:0 0 0 0">
                    <input type="password" id="TBX_ConfPass" style="width:205px;" />
                </div>
                <div id="DivF_Email" style=" position:relative;top:80px; padding: 0 0 0 0; margin:0 0 0 0">
                    <input type="text" id="TBX_Email" style="width:205px;" />
                </div>
            </div>
        </div>

起初我尝试不使用 0 边距和填充,但即使那样也没有任何区别

有什么建议我怎样才能使它们在所有浏览器中都一样(至少 3 个浏览器)?

最佳答案

http://jsfiddle.net/Jr2dB/1/

         <div id="DivLogRegForm" style="background-image: url('images/RegF.png'); background-repeat: no-repeat; width: 411px; height: 316px;">
        <div id="DivF_All" style="position:relative; top:70px;">
            <div id="DivF_User" style=" position:absolute;top:13px; padding: 0 0 0 0; margin:0 0 0 0">
                <input type="text" id="TBX_USER" style="width:205px;" />
            </div>
            <div id="DivF_Pass" style=" position:absolute;top:37px; padding: 0 0 0 0; margin:0 0 0 0">
                <input type="password" id="TBX_Pass" style="width:205px;" />
            </div>
            <div id="DivF_ConfPass" style=" position:absolute;top:57px; padding: 0 0 0 0; margin:0 0 0 0">
                <input type="password" id="TBX_ConfPass" style="width:205px;" />
            </div>
            <div id="DivF_Email" style=" position:absolute;top:80px; padding: 0 0 0 0; margin:0 0 0 0">
                <input type="text" id="TBX_Email" style="width:205px;" />
            </div>
        </div>
    </div>

这里在不同的浏览器中似乎同样损坏 但现在你可以修复它了

关于html - Chrome 与 FF 和 IE 中的 divs 布局/定位不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17393815/

相关文章:

jquery - 事件(选中)、悬停和非事件选项卡/div css 逻辑

html - IE 7 调试问题 - 神秘的 <li> 第一行缩进

javascript - 画架.js : Browser compatibility when placing an image within a container and adding mouse interactions

html - Wordpress CSS——可能是一个很好的解决方案

html - CSS 过渡在 Chrome 中不起作用

php - 在单独的 php 头文件中包含 jquery 以某种方式失败

html - 如何在具有超链接时使整个表格单元格可点击 - 使用 bootstrap v3

html - 如何在 Laravel 上设置不同的 404 错误页面?

html - 旋转 block 元素

html - 某些浏览器中的奇怪定位