Question

我有一个绝对定位的元素，我在jQuery的帮助下使用CSS属性'left'移动。

$("#element").css('left', '103px');

在Firefox中，这可以按预期工作。但是在Safari中，我可以在element.style下看到Web Inspector中出现的样式，但样式未更新。如果我禁用（并重新启用）任何匹配的CSS规则（即使那些没有直接应用于我的div），也会渲染使用jQuery的样式。

我在旧的PowerMac上使用jQuery 1.7.2运行Safari 5.0.6。

Answer 1

我遇到过这个问题，最后我在元素父容器上使用了addClass和removeClass。

试试这个

$("#element").css('left', '103px').parent().addClass("dummyClass").removeClass("dummyClass");

如果这不起作用，那么肯定会有效。

$("#element").css('left', '103px');
$("body").addClass("dummyClass").removeClass("dummyClass");

问题是有时候我们在改变CSS时不会重绘页面，所以我们需要强制重绘

Answer 2

！重要应该做的伎俩

$("#element").css('left', '103px !important');

Answer 3

我在实施视频进度条时遇到了类似的问题。我想要定位的元素是在DIV中使用'display：table-caption;'在阅读了@gaurang171对td元素的评论后，我最终不得不从div表中删除该元素并设置'display：block;'并且元素位置更新而不需要dummyClass。带有显示的div：table-caption中的块不起作用，它必须完全在表外。

Answer 4

Safari 似乎在重绘元素方面存在问题。幸运的是，我们可以通过向 css 类添加 transform: translateZ(0); 来强制重绘。这似乎在 BigSur 上已修复，但在 Safari Catalina 上会发生。

Answer 5

在safari 5.1.7

中它对我有用

根据我的经验，当.css（）失败时，我尝试使用.animate（），其中0为时间（即时）

尝试这样的事情让我知道它是否有效（在safari 5.1.7中测试并且有效）

        $(document).ready(function(){
           $("#element").animate({
               left: '+=103px'
           }, 0);
        });

jQuery样式未在Safari中应用

5 个答案: