javascript - 多台计算机上网站外观的奇怪差异

Question

我一直在通过修改 WordPress 创建一个网站，我发现当我查看该页面时，有些功能会有所不同。例如，我有一个根据滚动位置进出的横幅(使用 jQuery Waypoints)。在我正在编辑的计算机上，以隐身模式使用网站不会加载覆盖横幅的字体。但是，字体会在另一台计算机上加载(相同的浏览器，不同的操作系统，如果有帮助的话)。为什么会发生这些事情，我该如何解决？

顺便说一句，网站是 tedxyouthhillsborough.com。

这是我的代码(php):

<a href="/event-details/" class="bannerNav" style="margin-right: 0px;"><h2>
  <div style="margin-right: 0px;"><br/>SATURDAY MAY 24TH 2014<br/></div></h2>         <h3><div style="margin-right: 0px;"><br/>THE NUEVA SCHOOL<br/></div></h3></a>

这是我的css:

h2 div {
    font-family:'Open Sans', Sans-Serif;
    letter-spacing: -1px;
    padding: 10px;
    color: #fff;
    position: absolute;
    top:10px;
    right:83px;
    font-weight: 200;
}
h3 div {
    font-family:'Open Sans', sans-serif;
    letter-spacing: -1px;
    padding: 10px;
    color:rgb(114, 114, 114);
    position: absolute;
    top: 30px;
    right:120px;
    font-weight: 400;
    font-size: 20px;
}

Javascript:

$('a.logo_sm').fadeTo(0, 0);
 $('a.bannerNav').animate({
     'margin-right': '0px'
 })
 $('h3 div').animate({
     'margin-right': '0px'
 }, 200);
 $('h2 div').animate({
     'margin-right': '0px'
 }, 200);
 //$('.mainHeader').html(showFlag);

 $('div#main').waypoint(function (event, direction) {
     if (direction === 'down') {
         $('a.logo_sm').fadeTo(400, 1);
         $('a.flagNav').animate({
             'margin-left': '0px'
         }, 400);
         $('a.bannerNav').animate({
             'margin-right': '-352px'
         }, 200);
         $('h3 div').animate({
             'margin-right': '-352px'
         }, 200);
         $('h2 div').animate({
             'margin-right': '-352px'
         }, 200);
     } else {
         $('a.bannerNav').animate({
             'margin-right': '0px'
         }, 200);
         $('a.logo_sm').fadeTo(200, 0);
         $('a.flagNav').animate({
             'margin-left': '-195px'
         }, 400);
         $('h3 div').animate({
             'margin-right': '0px'
         }, 200);
         $('h2 div').animate({
             'margin-right': '0px'
         }, 200);
     }
 });

 });

Answer 1

只是一个建议，而不是使用像素 (px)，使用 em 来调整大小具有更大的优势，例如更好的响应能力。顺便说一句，我喜欢这个网站，尤其是主题。