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。你会让自己疯狂，试图让所有东西看起来都一样，从浏览器到浏览器。