CSS定位 - 相對定位問題

Question

我創建了一個網站，但我注意到使用IE瀏覽器稍微關閉了導航欄。我已經讀過這個位置：相對可能是關鍵，但是當我應用它時，導航欄在IE中​​根本不響應位置命令（頂部，左側等），並且在重新加載時會出現在具有FF瀏覽器的不同位置幾次。

請我能得到的建議在其方法是讓不同的瀏覽器正確定位元素的標準，同時也告訴我在哪裏，我有改變了我的導航欄的div從絕對到相對>

非常感謝腳麻

代碼提示：頁面包含公司徽標（id =橫幅）左邊浮動，一小部分城鎮和電話號碼（id = info）都右移。導航欄是列表形式，我使用block：inline命令以便列表從左到右讀取。

/* ----All page selectors---- */ 
 

 
body{ 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    font-size:16px; 
 
} 
 

 
.page { 
 
    position: relative; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    background-color: rgba(255,255,255,0.4); 
 
    font-family: gabriola, Verdana, Geneva, sans-serif; 
 
    color: #383838; 
 
    font-weight: bolder; 
 
} 
 

 
.banner a{ 
 
    color: black; 
 
    text-decoration: none; 
 
    letter-spacing:10px; 
 
} 
 

 
#bannerText{ 
 
    text-align:center; 
 
} 
 

 
.banner{ 
 
    font-family: sans-serif, Verdana, Geneva; 
 
} 
 

 
#phonenum{ 
 
    font-family: sans-serif, Verdana, Geneva; 
 
} 
 

 
#info{ 
 
    font-weight:bold; 
 
    color: #505050; 
 
    line-height:110%; 
 
} 
 

 
ul a{ 
 
    color: #383838; 
 
} 
 

 
/* ----Desktop only---- */ 
 

 
@media screen and (min-width:481px) { 
 

 
body{ 
 
    background-image: url("images/water.jpg"); 
 
} 
 

 
#info{ 
 
font-size: 200%; 
 
float: right; 
 
right:0px; 
 
width: 230px; 
 
margin: 15px 25px 0px 0px; 
 
padding:15px 5px 5px 5px; 
 
} 
 

 
#info ul{ 
 
margin:0px; 
 
padding-left:63px; 
 
} 
 

 
#phonelogo{ 
 
    float:left; 
 
    width:30px; 
 
} 
 

 
#phonenum{ 
 
    float:right; 
 
    width: 190px; 
 
    margin:0%; 
 
    font-size: 80%; 
 
    font-family: sans-serif, Verdana, Geneva; 
 
} 
 

 
.banner{ 
 
    float:left; 
 
    padding-top:1px; 
 
    margin-left: 18px; 
 
    opacity: 0.7; 
 
} 
 

 
#banner{ 
 
    margin-top: 20px; 
 
} 
 

 
.banner p{ 
 
    margin:0px; 
 
} 
 

 
#bannerText{ 
 
    letter-spacing: 5px; 
 
    margin-bottom:5px; 
 
    padding-left:5px; 
 
} 
 

 
.btn{display:none;} 
 

 
#toolbar { 
 
    position: absolute; 
 
    margin:220px 0px 0px 16px; 
 
    opacity: 0.7; 
 
} 
 

 
.menu li a{ 
 
    font-family: gabriola, Verdana, Geneva, sans-serif; 
 
    font-size: 140%; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: black; 
 
    margin-right:30px; 
 
} 
 

 
.nav{ 
 
    position: absolute; 
 
    list-style-type: none; 
 
    top:10px; 
 
    left:-33px; 
 
} 
 

 
.nav ul li{ 
 
    display: inline; 
 
} 
 

 
.nav ul li a{ 
 
    font-family: gabriola, Verdana, Geneva, sans-serif; 
 
    font-size: 140%; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.nav ul li a:hover{ 
 
    color: yellow; 
 
}

<div id="homePage" class="page"> 
 

 
    <div class="banner"> 
 
    <p id="banner"> 
 
     <a href="index.htm"><img src="images/Logo.png" alt=" 
 
            Logo for site" /></a> 
 
    </p> 
 
    <p id="bannerText"><a href="Slogan link.htm"> 
 
        Slogan under the Logo</a></p> 
 
    </div> 
 

 
    <div id="info"> 
 
    <table> 
 
     <tr> 
 
     <td id="phonelogo"><img src="images/phoneimage.png" alt=" 
 
             Mobile phone image" /></td> 
 
     <td id="phonenum">(08080) 080 080</td> 
 
    </tr> 
 
    </table> 
 

 
    <ul> 
 
    <li>Town A</li> 
 
    <li>Town B</li> 
 
    <li>Town C</li> 
 
    </ul> 
 
</div> 
 

 
<div id="toolbar"> 
 
    <div> 
 
     <p id="toolBackground"> 
 
     <img src="images/toolBackground.png" alt=" 
 
       Coloured background for toolbar" /> 
 
     </p> 
 
    </div> 
 
    <div class="dropdown"> 
 
     <ul class="nav"> 
 
     <li><img class="btn" src="images/menuIcon.png" alt=" 
 
         Menu button for mobile site version" /> 
 
      <ul class="menu"> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      <li><a href="page.htm">Page1</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 1

所以造型是瀏覽器之間的相同始終使用一個CSS復位。 很小的CSS重置我總是用：

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
    display: block; 
} 

然後，一切都應該看（大部分）相同的瀏覽器之間。 還要記住顯示：inline-block;根據字體大小在元素之間添加空格。