CSS定位 - 相对定位问题

Question

我创建了一个网站，但我注意到导航栏在使用 IE 浏览器时有点偏离。我已经读过 position:relative 可能是关键，但是当我应用它时，导航栏在 IE 中根本不响应位置命令（顶部、左侧等），并且在重新加载时会出现在 FF 浏览器的不同位置几次。

请问我可以就使用不同浏览器获取正确定位元素的标准方法获得建议，并告诉我将导航栏 div 从绝对值更改为相对值时哪里出了问题>

非常感谢

代码提示：页面由左侧浮动的公司徽标 (id=banner)、右侧浮动的一小部分城镇和电话号码 (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;
}

那么浏览器之间的一切都应该（大部分）相同。 还要记住 display: inline-block;根据字体大小在元素之间添加空格。