1. 首頁
  2. 問答
  3. 導航欄的輸出在不同的瀏覽器中有所不同，爲什麼會這樣做？

導航欄的輸出在不同的瀏覽器中有所不同，爲什麼會這樣做？

2014-09-11 28 views
0

我仍然在學習我的HTML和CSS，現在我正在練習導航欄。此代碼爲Mozilla和Chrome顯示不同的填充，爲什麼這樣做？我無法弄清楚爲什麼真的很煩人。我要在這裏分享代碼。導航欄的輸出在不同的瀏覽器中有所不同，爲什麼會這樣做？

<!doctype html> 
<html> 
    <head> 
     <title>Practice</title> 

     <style> 

    /* ====== RESET CODE ======= */ 


    html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 

    body { 
      font-family: arial; 
    } 

     #top { 
       width:100%; 
       height:40px; 
       background-color:#555; 
     } 

     .container { 
         margin:0 auto; 
         padding:0px; 
         width: 1000px; 

     } 

     #nav ul li { 
        float:left; 
        display:block; 
        margin:0px; 
     } 

     #search-bar { 
        float:right; 
        border: 1px solid; 
        width:315px; 
        position: relative; 
        top:5px; 
     } 

     .search { 
        width: 100%; 
        padding:2px; 
     } 

     a { 
      padding: 18px 12px; 
      color:#fff; 
      text-decoration:none; 
      margin:0px; 
      position: relative; 
      top:10px; 
     } 

     a:hover { 
      background-color:#777; 
      padding:11px 12px; 
     } 

     </style> 
    </head> 

    <body> 
     <div id="top"> 
      <div class="container"> 
      <div id="nav"> 
       <ul> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link Jupiter</a></li> 
        <li><a href="#">Link Venus</a></li> 
        <li><a href="#">Link Mars</a></li> 
        <li><a href="#">Link Neptune</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
       <div id="search-bar"> 
        <input class="search" type="text" placeholder="search"/> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

感謝您的幫助球員。

來源

2014-09-11 Hawkeye93

回答

0

所有的瀏覽器都有它自己的默認CSS。您嘗試重置RESET CODE中的默認CSS，但我認爲您缺少一些元素。最好嘗試這種復位代碼：

* { 
    margin: 0; 
    padding: 0; 
    font-size: 12px; 
    line-height: 1; 
    zoom: 1; 
    font: inherit; 
    vertical-align: baseline; 
}

來源

2014-09-11 07:30:46 Justinas

相關問題

 相關問題