Различные поля между Firefox и Chrome

Question

Поля с полем div отличаются между Chrome и Firefox. Я напечатал одну фотографию с хромом, а один с 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> 

Firefox:

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

Chrome:

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

Может ли кто-нибудь объяснить, почему это происходит? Thanks

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

Не прил ваш сайт только потому, что эти шутники скажем так, ничего плохого в таблицах. Не у всех есть доступ к программному обеспечению для создания всех этих модных страниц CSS, которые постоянно нужно корректировать каждый раз, когда вы хотите изменить одну вещь. Firefox - ужасный браузер, наши веб-страницы выглядят одинаково во всех браузерах за пределами Firefox, и я устал от некоторых особых исключений, поэтому я просто говорю пользователю не использовать FF на нашей странице. Вы будете садиться за себя, пытаясь заставить все выглядеть одинаково от браузера до браузера.