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">[phone]</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;
}

然后，浏览器之间的所有内容都应该看起来（大部分）相同。还要记住显示：内联块;根据字体大小在元素之间添加空格。