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之間的顯示區別

回答

相關問題