標記位置在不同瀏覽器中發生變化

現在，我遇到的問題是根據瀏覽器在我的模板更改位置上的標記之一。這是我想要的方式，當我用Chrome中打開它，但是當我用IE瀏覽器打開它，它右移....

這裏是我的模板CSS代碼

<style type="text/css"> 
     #header { 
      background-color: FEB7B7; 
      height: 100px; 
      width: 800px; 
      margin-left: auto; 
      margin-right: auto; 
      position: relative; 
     } 

     #menu { 
      background-color: FBFEB7; 
      height: 50px; 
      width: 440px; 
      left: 791px; 
      top: 58px; 
      color: Black; 
      position: absolute; 
      z-index: 2; 
      color: Black; 
     } 

     #content { 
      background-color: B7CCFE; 
      height: 730px; 
      width: 800px; 
      margin-left: auto; 
      margin-right: auto; 
     } 

     #footer { 
      background-color: BCFEB7; 
      height: 40px; 
      width: 800px; 
      margin-left: auto; 
      margin-right: auto; 
     } 
    </style>

來源

2011-12-16 livelaughlove

請爲我們製作http://jsfiddle.net。（你定義的十六進制顏色錯誤，你忘記了＃＃盈方） – noob 2011-12-16 07:30:51

所以問題是菜單不是在正確的地方吧？實際上菜單應該在標題內，因爲你不能說正確的是固定像素大小，如果其他div是自動在中心的軟件，因爲它將取決於瀏覽器窗口和屏幕大小 – noob 2011-12-16 07:50:18

像米莎說，這是因爲您的菜單絕對位於頁面的一側，而其餘內容則是水平居中的。

你剛纔看到的是瀏覽器視口大小的差異;嘗試調整窗口大小，你會明白我的意思。可以通過在菜單div中放置菜單div來解決該問題。然後，在您的#menu CSS中不使用left和top，而是使用right: 0px和bottom: 0px。這會將你的菜單定位到你的標題的右下角，我認爲這是你正在拍攝的內容。

所以你的HTML看起來像這樣：

<div id="header"> 
     <br />Student Name: 
     <br />Student Number: 
     <br />Assignment #2: Introduction to PHP<br /><br /> 

     <div id="menu">  
       <br /> 
       <center> 
        <a href="index.php">Home</a> | 
        <a href="Question1.php">Question 1</a> | 
        <a href="Question2.php">Question 2</a> | 
        <a href="Question3.php">Question 3</a> | 
        <a href="Question4.php">Question 4</a> 
       </center> 
     </div> 
    </div>

而且你的CSS將變成這樣：

#menu { 
     background-color: #FBFEB7; 
     height: 50px; 
     width: 440px; 
     right: 0; 
     bottom: 0; 
     position: absolute; 
     color: black; 
    }

還有其他一些問題，在你的代碼，更何況你的編碼風格本身，但我現在只會阻止那些人，因爲這應該回答你問的問題。您可以看看example。

來源

2011-12-16 08:03:21 justis

標記位置在不同瀏覽器中發生變化

回答

相關問題