网站在不同浏览器中呈现不同

-1

为什么my website在Google Chrome浏览器中的显示效果与Mozilla Firefox浏览器不同？网站在不同浏览器中呈现不同

例子：

菜单是在Chrome

这里是我的代码越往上/小：

的header.php

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 

     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic' rel='stylesheet' type='text/css' /> 

    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="nav"> 
       <nav> 
        <ul class="menu-hover"> 
         <li> <a href="index.php"> Home </a> </li> 
         <li> 
          <a href="downloads.php" id="dd"> Downloads </a> 
          <ul> 
           <li><a href="paddis-skypetools.php">Paddis SkypeTools</a></li> 
           <li><a href="greatzip.php">GreatZip</a></a></li> 
           <li><a href="pczip-cleaner.php">Pc Zip Cleaner</a></a></li> 
          </ul> 
         </li> 
         <li> <a href="forums.php"> Forums </a></li> 
         <li> <a href="youtube.php"> YouTube </a> </li> 
         <li> 
          <a href="contact.php"> Contact </a> 
         </li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </body> 
    </html>

风格。 C SS

body { 
    font-family: 'Source Sans Pro'; 
} 

#wrapper { 
    width:100%; 
    background-color:white; 
    margin:auto; 
} 

#top { 
    width:100%; 
    height:60px; 
    border-style: solid; 
    border-width: 1px; 
} 

#logo { 
    clear:left; 
    border-style: solid; 
    border-width: 1px; 
    width:30%; 
    float:left; 
    height:60px; 
} 

#nav { 
    clear:right; 
    width: 100%; 
    border-width: 0px; 
    float:right; 
    height:60px; 
} 

#content 
{ 
    width:97.9%; 
    min-height:400px; 
    border-style: solid; 
    border-width: 1px; 
    padding:20px; 
} 

#footer { 
    height:100px; 

} 

.divider1 { 
    display: block; 
    float: left; 
    padding: 0; 
    margin: 8px auto; 
    height: 0; 
    width: 90%; 
    max-height: 0; 
    font-size: 1px; 
    line-height: 0; 
    clear: both; 
    border: none; 
    border-top: 1px solid #aaaaaa; 
    border-bottom: 1px solid #ffffff; 
} 

.bp { 
    width: 60%; 
} 

/* Navigation Menu 
---------------------------------*/ 


    ul ul { 
     display: none; 
     background: #00B6ED; 
    } 

    ul li:hover > ul { 
     display: block; 
    } 

    ul { 
     background: #00B6ED; 
     border-radius: 2px; 
     list-style: none; 
     position: relative; 
     margin-top: -25px; 
     margin-left: -8px; 
    } 

     ul:after { 
      content: ""; 
      clear: both; 
      display: block; 
     } 

     ul li { 
      float: left; 
     } 

      ul li:hover { 
       background: #404040; 
      } 

       ul li:hover a { 
        color: #fff; 
       } 

      ul li a { 
       display: block; 
       padding: 8px 5px; 
       color: #FFF; 
       text-decoration: none; 
       height: 25px; 
       font-size: 20px; 
       margin: 10px; 
       margin-top: 5px; 
      } 

     ul ul { /* Hover menu */ 
      background: #6B6B6B; 
      border-radius: 0px; 
      padding: 0; 
      position: absolute; 
      top: 100%; 
      margin-top: 0px; 
      margin-left: 0px; 
     } 

      ul ul li { 
       float: none; 
       border-top: 1px solid #6B6B6B; 
       position: relative; 
      } 

       ul ul li a { 
        color: #fff; 
        height: 30px; 
        margin-bottom: 0px; 
       } 

        ul ul li a:hover { 
         background: #404040; 
         height: 30px; 
         margin-bottom: 0px; 
        } 

      ul ul ul { 
       position: absolute; 
       left: 100%; 
       height: 35px; 
       top: 0; 
      } 

    .js-enabled ul li:hover > ul { 
     display: none; 
    } 

    .menu-hover { 
     margin-left: -8px; 
     width: 100%; 
     margin-top: -36px; 
    }

来源

2014-09-02 Tutorial Nom

看起来和我完全一样。 – APAD1 2014-09-02 15:10:35

哦，我明白了，它现在不加载css？！ – 2014-09-02 15:16:54

http://stackoverflow.com/questions/25760396/chrome-automatic-shift-of-web-elements – 2014-09-18 17:20:48

这是因为，你还没有使用reset.css。 CSS Reset重置所有浏览器样式，最好的是Eric Meyer的CSS Reset。重置样式表的目标是减少浏览器在缺省行高，标题页边距和字体大小等方面的不一致性。

上述重置的内容是：

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

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; 
}

或者，如果你想要一个简单的复位，你可以这样做：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    list-style: none; 
}

来源

2014-09-02 15:10:01

或[** normalize.css **]（http://necolas.github.io/normalize .css /）也是一个不错的选择。 – 2014-09-02 15:14:02

@Paulie_D真的！ :)即使这很好，YUI CSS Reset也是！ :) – 2014-09-02 15:15:16

它不加载CSS，任何人都知道为什么？ – 2014-09-02 15:17:40

它看起来不同，因为每个浏览器都有自己的自己定义的CSS样式。当没有其他CSS被内联定义或来自外部CSS文件时，此样式适用于HTML标记。这就是为什么很多网站使用“Reset.css”的原因。

来源

2014-09-02 15:19:41

网站在不同浏览器中呈现不同

回答

相关问题