显示Firefox和Chrome / IE之间的差异 [英] Display differences between Firefox and Chrome/IE

问题描述

我很失去理解为什么我的HTML元素显示在不同的地方在Firefox相比，Chome和IE。我使用position：absolute将标题和字幕文本放在我想要的标题中，但是在FF和Chrome / IE之间的文本元素的水平位置似乎差不多30px。

I'm at a loss to understand why I'm having HTML elements display in different places in Firefox compared to Chome and IE. I'm using position:absolute to place the title and subtitle text in a header where I want them to be but there seems to be about a 30px difference in the horizontal position of the text elements between FF and Chrome/IE

HTML很简单，看起来像这样：

The HTML is simple and looks like this:

<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
我老实不明白有什么区别是什么

You can see this in situ on a test page here: http://mardona.org/test.php I honestly don't understand what the difference is so any help would be appreciated.

推荐答案

您应该给予 position：relative; 到 .mainRounded ，然后在其他定位的margin-top值中将top的margin值更正为0，那么它必须按照您的需要工作。

You should give position: relative; to .mainRounded, after then correct your margin value of top to 0 in other positioned value of margin-top, then it must work as you want.

这篇关于显示Firefox和Chrome / IE之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！