Question

我很难理解为什么我在Firefox中的不同位置显示HTML元素与Chome和IE相比。我正在使用position：absolute将标题和副标题文本放在我希望它们的标题中但是FF和Chrome / IE之间的文本元素的水平位置似乎有大约30px的差异

HTML非常简单，如下所示：

<div id="mainPage">
<div id="mainContent" class="mainRounded">
    <div id="header">
        <div id="title"><h1>Longer Title Text</h1></div>
        <div id="subtitle"><h2>Subtitle text</h2></div>
        <div id="banner"></div>
    </div>
</div>
</div>

，CSS就是这样：

.mainRounded {
margin: 0 auto;
width: 1000px;
border-radius: 30px;
background-color:#e9d7dc;
box-shadow: 5px 5px 3px #888888;
overflow:hidden;
margin-bottom: 25px;
}
#header #banner {
background-color: #0033CC;
height: 150px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
position: relative;
overflow:hidden;
border-radius: 30px 30px 0 0;
}
#header #title {
padding: 0 ;
position: absolute;
top: -40px;
left: 710px;
}
#header #subtitle {
padding: 0 ;
position: absolute;
top: 95px;
left: 870px;
}
#header #title h1 {
font-family: Georgia;
    font-size: 54px;
    font-style: italic;
    font-weight: normal;
text-shadow: 2px 2px 5px #0033CC;
}
#header #subtitle h2 {
font-family: Georgia;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
}

您可以在测试页面上就地看到这一点：http://mardona.org/test.php 老实说，我不明白有什么不同，所以任何帮助都会受到赞赏。

Answer 1

你应该position: relative;给.mainRounded，然后在margin-top的其他定位值中将top的margin值更正为0，然后它必须按照你想要的方式工作。

Answer 2

每个不同的浏览器都有不同的行为来显示HTML样式。你需要重置你的CSS：

希望有用http://developer.yahoo.com/yui/reset/，尤其是IE IE Styling

Answer 3

我在FF 16和Chrome 25中查看了您的测试页 - DIV元素在两种浏览器中都正确对齐。

H1和H2文本似乎呈现出不同的渲染方式，这可能就是为什么它看起来有不同的水平位置。

看看这个：https://stackoverflow.com/a/5082824/1443797

显示Firefox和Chrome / IE之间的差异

3 个答案: