jquery 仅在 Safari 中产生保证金问题

Posted 2023-03-06

【中文标题】jquery 仅在 Safari 中产生保证金问题

【英文标题】：jquery producing margin issues in Safari only

【发布时间】：2012-06-25 21:50:59

【问题描述】：

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

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

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

实时页面：

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

static html version 工作正常，这是 wordpress 问题，还是它还没有使用真正的域？

jquery 用于在下面触发 caroufredsel：

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');

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

【问题讨论】：

我认为 jQuery 的选择器是 $，而不是 jQuery...

您的一个脚本无法加载，并且有很多地方使用“rem”作为单位。

@Bluefire 您可以同时使用 $** 或 **jQuery** 作为选择器，以避免与其他框架发生冲突。这说明手册：**默认情况下，jQuery 使用“$”作为“jQuery”的快捷方式，请看这里：docs.jquery.com/Using_jQuery_with_Other_Libraries

感谢 cmets 伙计们 - @SVS 在未加载的明显脚本上的好地方 - 结果表明错误不是未加载的脚本，而是由已修复的 html 错字触发的。然而，主要问题仍然悬而未决。此外，rem 是一个有效的单位，它有助于避免编写规则来选择嵌套元素以将它们重置回 1em (css-tricks.com/font-sizing-with-rem)

无法连接到主机

【参考方案1】：

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

你总是打电话给.caroufredsel_wrapper而不是.wrapper吗？