Firefox和Chrome/IE之间的显示区别

我不知道为什么我要在Firefox中的不同位置显示HTML元素，而不是Chome和IE。我正在使用position：absolute将标题和副标题文本放置在标题中，但我希望它们是标题，但FF和Chrome/IE之间的文本元素的水平位置似乎差不多有30px差距Firefox和Chrome/IE之间的显示区别

该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 老实说，我不明白是什么差别是如此之大p将不胜感激。

来源

2013-03-20 user2188805

我没有看到任何区别。清除缓存？ – slamborne 2013-03-20 00:47:22

您是否想要标题和副标题？你可以用{position：absolute;左：0;右：0; margin：0 auto;}并让浏览器计算中心位置。 – eivers88 2013-03-20 00:47:35

不，我不想中心 - 我试图将文本对齐到与特定位置相关的背景图像，我不幸无法向您展示。 – user2188805 2013-03-20 01:04:06

你应该给position: relative;到.mainRounded，然后后在边距的其他定位值最高的保证金值修正为0，那么它必须工作，只要你想。

来源

2013-03-20 04:11:02

这样做！非常感谢你！ – user2188805 2013-03-20 08:40:02

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

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

来源

2013-03-20 00:46:57 egig

感谢您的建议。我刚刚添加了一个CSS重置块，但它没有改变浏览器之间水平位置的差异。 – user2188805 2013-03-20 01:01:22

我在FF 16和Chrome 25看了你的测试页 - 在DIV元素在这两个浏览器正确对齐。

虽然H1和H2文字似乎呈现不同的效果，但这可能是它看起来有不同水平位置的原因。

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

来源

2013-03-20 00:49:04 Mupps

我没有想过H1和H2标签，但我已经更新了页面，并将它们转换为，除了不必调整垂直位置，它没有任何区别。我还添加了一些“重置”CSS，如下所示，但这也没有什么区别。我知道在FF和Chrome中使用的盒子模型是不同的，但似乎没有边缘和填充的问题 - 它确实看起来像FF将#title和#subtitle div放在更靠右的位置Chrome – user2188805 2013-03-20 01:03:29

尝试将它们更改为较小的字体 - 比如14px Arial，并查看它们是否在同一位置对齐。另外，请确保您正在浏览的浏览器的宽度在FF和Chrome中相同 – Mupps 2013-03-20 01:10:05

Firefox和Chrome/IE之间的显示区别

回答

相关问题