3

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

请有人解释为什么会这样？谢谢

4

3 回答 3

4

这可以通过 -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;
      }
}
于 2015-02-16T17:53:36.903 回答
0

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

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

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

于 2013-06-20T21:31:27.963 回答
0

不要仅仅因为这些小丑这样说就调整您的网页，表格没有错。不是每个人都可以使用广告软件来创建所有这些花哨的 CSS 页面，每次你想要改变一件事时，这些页面都需要不断地调整。Firefox 是一个糟糕的浏览器，我们的网页在 Firefox 之外的所有浏览器上看起来都一样，我厌倦了为其设置特殊例外，所以我只是告诉用户不要在我们的页面上使用 FF。你会让自己发疯，试图让浏览器之间的一切看起来都一样。

于 2015-08-10T12:15:04.953 回答