IE兼容性問題w/wordpress

Question

通常wordpress模板會爲您提供跨瀏覽器兼容性，但我基本上已經構建了自己的瀏覽器，而且我不需要在一段時間內處理IE問題。除了#social和#menu之外，一切似乎都正常。這些CSS的是在這裏：

#social { 
float:left; 
width:500px; 
display:inline; 
margin:333px 0 -420px 208px; 
} 

#menu { 
display:inline; 
background:transparent; 
width:100%; 
float:left; 
margin:365px 0 0 -55px; 
text-transform:lowercase; 
} 

而這裏的網站： http://www.erisdesigns.net/STAGE/ED1.3/

我看起來是一個簡單的定位問題。我真的只關心讓他們在IE7和IE8上工作。謝謝你的幫助。

Answer 1

如果標題的寬度/高度是固定的，並且您希望每個元素都顯示在標題中的某個位置，則使用浮點數和頁邊空間是一個壞主意。你把自己放在瀏覽器特質的擺佈之下，IE不是很仁慈。改用絕對定位。

首先，將position: relative;添加到#headercontent元素。 （或刪除它，只是使用#header。我沒有看到有兩個標題div的意思。）如果需要，還可以給header一個固定的高度，以便在重新排列其他元素時不會摺疊。

現在，使用position: absolute;將每個元素放在標題（引號，菜單和社交媒體圖標）中，併爲其頂部和左側（或底部和右側）屬性分配固定數值。

是的，絕對定位感覺像蠻力並且稍不雅觀，但包括IE瀏覽器在內的所有瀏覽器都傾向於服從暴力。