Firefox和Chrome之間的不同邊距

Question

Chrome和Firefox之間使用div框的邊距不同。我已經用Chrome打印了一張照片，還有一張使用了Firefox。

CSS：

.maincontent{ 
    margin: 0px auto; 
    width: 960px; 
    height: 900px; 
    border: 1px solid #000; 
    margin-top: 50px; 
    background-color: #F8F8F8; 
    margin-bottom: 50px; 
} 
.mainbottomcorner{ 
    margin-top: 87px; 
    width: 962px; 
    height: 30px; 
    margin-bottom: 50px; 
} 

h1{ 
    font-weight: 100; 
    font-size: 25px; 
    font-family:furoreregular; 
    color: #5B5B5B; 
    margin: 0 auto; 
    text-shadow: 1px 2px #C9C9C9; 
} 
.welcometext{ 
    margin: 0 auto; 
    margin-top: -40px; 
} 

    .maintopcorner{ 
     margin-left: -1px; 
    } 
    .copyright p{ 
    font-family:Arial, Helvetica, sans-serif; 
    color: #9F9F9F; 
    font-size: 13px; 
    margin-top: 18px; 
    margin-left: -530px; 
    } 
    .footer{ 
     height: 50px; 
     width: 960px; 
     background-color: #353535; 
     border: 1px solid #000; 
     margin-bottom: 30px; 
    } 

     .codebyadam p{ 
    font-family:Arial, Helvetica, sans-serif; 
    color: #373737; 
    opacity: 0.7; 
    font-size: 13px; 
    margin-top:-10px; 
    } 

    .footer a{ 
     color:#F00; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 13px; 
     text-decoration:none; 
    } 
    .genrelinks{ 
     margin-left: 600px; 
     margin-top: -32px; 
    } 
    .footer a:hover{ 
     color:#FFF; 
    } 
    .artist1{ 
     margin-left: -570px; 
     margin-top: -180px; 

    } 
     .artist2{ 
     margin-left: 570px; 
     margin-top: -130px; 

    } 
    .artist1 a{ 
     font-weight: 100; 
     font-size: 25px; 
     font-family:furoreregular; 
     color: #5B5B5B; 
     text-shadow: 1px 2px #C9C9C9; 
     text-decoration: none; 
    } 
    .artist2 a{ 
     font-weight: 100; 
     font-size: 25px; 
     font-family:furoreregular; 
     color: #5B5B5B; 
     text-shadow: 1px 2px #C9C9C9; 
     text-decoration: none; 
    } 
    .artist1 a:hover{ 
     color:#F00; 
    } 
    .artist2 a:hover{ 
     color:#F00; 
    } 
    table.artister{ 
     border-spacing: 30px; 
     margin-top: -50px; 
    } 
    table.fairbank img{ 
     -webkit-transform:scale(1); /*Webkit: Scale down image to 0.8x original size*/ 
     -moz-transform:scale(1); /*Mozilla scale version*/ 
     -o-transform:scale(1); /*Opera scale version*/ 
     -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ 
     -moz-transition-duration: 0.5s; /*Mozilla duration version*/ 
     -o-transition-duration: 0.5s; /*Opera duration version*/ 
     opacity: 1; /*initial opacity of images*/  

    } 
table.fairbank img:hover{ 
     -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ 
     -moz-transform:scale(1.1); /*Mozilla scale version*/ 
     -o-transform:scale(1.1); /*Opera scale version*/ 
     box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ 
     -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ 
     -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ 
     opacity: 1; 
    } 

代碼：

<div class="maincontent"> 
    <div class="maintopcorner"> 
     <img src="Images/corners/topcorner.png" /> 
    </div> 
    <div class="maincontentwrap"> 
    <center> 
    <div class="welcometext"> 
     <img src="Images/thu_artist_pic.png" /> 
    </div> 
     </br></br> 
     <table class="artister"> 
     <tr> 
     <td><img src="Images/artists/fairbank.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     <td> <img src="Images/artists/devultra.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     <td> <img src="Images/artists/kryptex.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     </tr> 
     <tr> 
     <td> <img src="Images/artists/toltex.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     <td> <img src="Images/artists/dubtherapy.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
      <td> <img src="Images/artists/dubwood.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     </tr> 
     </table> 
     <table class="artistdubber"> 
     <tr> 
      <td> <img src="Images/artists/dubber.png" /> 
     <table class="fairbank"> 
      <tr> 
      <td> <a href="#"><img src="Images/socialsbuttons/soundcloud.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/fb.png" /> </a> </td> 
      <td> <a href="#"><img src="Images/socialsbuttons/twitter.png" /> </a> </td> 
      </tr> 
     </table> 
     </td> 
     </tr> 
     </table> 
     <div class="artist1"> 
      <a href="#"> cryphead </a> 
      </br></br> 
      <a href="#"> eudorix </a> 
      </br></br> 
      <a href="#"> Witrix </a> 
     </div> 
     <div class="artist2">  
      <a href="#"> Oskri </a> 
      </br></br> 
      <a href="#"> Topki </a> 
      </br></br> 
      <a href="#"> Lök </a> 
     </div> 
    </center> 

<center> 
    <div class="mainbottomcorner"> 
     <img src="Images/corners/bottomcorner.png" /> 
    </div> 
</center> 
</div> 

</div> 
<center> 
<div class="footer"> 
    <div class="copyright"> 
     <p> All content copyright THU Records 2013 © All Rights Reserved. </p> 
    </div> 
     <div class="genrelinks"> 
      <a href="#" class="link"> Dubstep </a> 
      &nbsp; | &nbsp; 
      <a href="#" class="musiclink"> Hard Style </a> 
      &nbsp; | &nbsp; 
      <a href="#" class="musiclink"> Glitch Hop </a> 
      &nbsp; | &nbsp; 
      <a href="#" class="musiclink"> Chillstep </a> 
     </div> 


</div> 
<div class="codebyadam"> 
    <p> Design by HUS0_o, Coded by zackÉ</p> 
</div> 
</center> 
</div> 
</body> 
</html> 

火狐：

http://imageshack.us/a/img834/5770/jnz.png

鉻：

http://imageshack.us/a/img18/2084/mh7.png

可以請某人解釋爲什麼會發生這種情況？ 謝謝

Answer 1

也許你碰到瀏覽器默認樣式衝突。 查看this有關此事的文章和解決方法。

如果你不知道，每個瀏覽器都有自己默認的「用戶 代理」的樣式表，它使用使無樣式的網站顯得更加清晰可辨。

另一種方式來解決，這是使用類似normalize.css

Answer 2

這確實與媒體查詢的伎倆-webkit-：

/*css declaration generic for firefox and other browsers*/ 

.main-wrapper .container { 
    margin-top: 5px; 
} 

/*css declaration only for Chrome/Safari*/ 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
     .main-wrapper .container { 
      margin-top: 20px; 
     } 
} 

Answer 3

不要形容詞您的網頁，只是因爲這些笑話這樣說，表沒有錯。不是每個人都可以訪問adv軟件來創建所有這些花哨的CSS頁面，每次你想改變一件事時都需要不斷調整。 Firefox是一個可怕的瀏覽器，我們的網頁在Firefox以外的所有瀏覽器上看起來都一樣，我厭倦了對它做特殊的例外，所以我只是告訴用戶不要在我們的頁面上使用FF。你會讓自己瘋狂，試圖讓所有東西看起來都一樣，從瀏覽器到瀏覽器。