Question

带有div框的边距在Chrome和Firefox之间有所不同。我用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

这可以通过-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 2

可能您遇到了浏览器默认样式冲突。查看this关于此事的文章以及解决问题的方法。

如果您不知道，每个浏览器都有自己的默认用户代理商的样式表，它用来使无格式的网站看起来更清晰。

解决此问题的另一种方法是使用normalize.css

之类的东西

Answer 3

不要因为这些笑话者这么说而对你的网页进行调整，表格没有任何问题。不是每个人都可以访问adv软件来创建所有这些花哨的CSS页面，每次想要改变一件事时都需要不断调整。 Firefox是一个糟糕的浏览器，我们的网页在Firefox以外的所有浏览器上看起来都一样，而且我厌倦了为它做特殊例外，所以我只是告诉用户不要在我们的页面上使用FF。你会疯狂地试图让所有东西从浏览器到浏览器看起来都一样。

Firefox和Chrome之间的利润率不同

3 个答案: