html - 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

Chrome :

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

有人能解释一下为什么会这样吗？谢谢

Answer 1

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