6

使用响应式 caroufredsel,就像 Chrome 和 Firefox 中的魅力一样,但在 Safari 中,它突然产生 800 像素的顶部和底部边距,把所有东西都扔掉了。

它是一个响应式网站,奇怪的是,当受到 500 像素或以下屏幕的媒体查询的影响时,问题不会发生。

该站点是一个 wordpress 自定义构建,当一切准备就绪时,它在服务器上等待域被映射。

直播页面:

http://109.203.120.0/~wirebird/wordpress/the-guitars/

静态 html 版本工作正常,这是 wordpress 问题,还是它还没有使用真正的域?

用于在下面触发 caroufredsel 的 jquery:

jQuery(document).ready(function() {

jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });   

});

function doSomething() {

jQuery('#guitars-gallery').trigger('destroy', true);
jQuery('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'});

jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

jQuery(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});

欢迎任何想法,这让我发疯!

更新:我现在已经解决了这个问题,方法是在调用轮播后使用 jquery 更改样式:

jQuery('.caroufredsel_wrapper').css({'margin-top': '0px', 'margin-bottom': '0px'});

解决了这个问题,但我仍然不知道它为什么会发生:-)

4

1 回答 1

0

我会在 wordpress 中检查您的主题样式表,以确保您没有任何冲突的样式。

你总是打电话 .caroufredsel_wrapper而不是反对.wrapper

于 2012-06-27T19:16:49.820 回答