Question

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

请问我可以获得有关哪种方法是使用不同浏览器正确定位元素的标准方法的建议，并告诉我将导航栏div从绝对更改为相对的错误＆gt;

非常感谢

代码提示：页面由左侧浮动的公司徽标（id = banner），一小部分城镇和phonenumber（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重置：

FullName                 Email
---------                ----------
John    Smith            jhrjf@gmail.com
Kevin   Johnson          hheraf1010@gmail.com

然后浏览器之间的所有内容（大多数）都应该相同。还要记住display：inline-block;根据font-size在元素之间添加空格。

CSS定位 - 相对定位问题

1 个答案: