我一直在通过修改 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);
}
});
});
最佳答案
只是一个建议,而不是使用像素 (px),使用 em 来调整大小具有更大的优势,例如更好的响应能力。顺便说一句,我喜欢这个网站,尤其是主题。
关于javascript - 多台计算机上网站外观的奇怪差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22242727/