jQuery 样式未在 Safari 中应用

Posted 2023-03-06

【中文标题】jQuery 样式未在 Safari 中应用

【英文标题】：jQuery style not being applied in Safari

【发布时间】：2012-06-11 09:37:39

【问题描述】：

我有一个绝对定位的元素，我在 jQuery 的帮助下使用 CSS 正确地“向左”移动它。

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

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

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

【问题讨论】：

添加一个left:103px的类怎么样；给你 CSS 和做 $('emelent').addClass('left_class'); ?这会有所作为吗？

如果它在 CSS 中它可以工作，但我希望能够使用 jQuery 移动元素，但它不起作用。

我已经将问题追溯到这个绝对定位的父元素。如果我将其设置为相对定位，它将呈现 jQuery 应用样式。

你能发布一个工作网页来展示这个问题吗？

【参考方案1】：

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

【参考方案2】：

我在实现视频进度条时遇到了类似的问题。我想要定位的元素位于带有“display:table-caption;”的 DIV 中在阅读了关于 td 元素的@gaurang171 评论后，我最终不得不从 div 表中删除该元素并设置“显示：块；”并且无需 dummyClass 即可更新元素位置。带有 display:block 的 div 在表格标题内不起作用，它必须完全在表格之外。

【参考方案3】：

!important 应该可以解决问题

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

【参考方案4】：

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

试试这个

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

如果这不起作用，下面肯定会起作用。

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

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

【讨论】：

老兄，你是救命稻草！ $("body").addClass("dummyClass").removeClass("dummyClass");作品

很高兴它对您有所帮助。是的，有些时候直接父母不会造成问题，所以你需要升级。通常身体可以解决问题。我看到在正文上添加类不起作用的唯一情况是当您在 td 中有元素时，在这种情况下您需要添加/删除类或有时在 td 上添加/删除属性对齐。

【参考方案5】：

它在 safari 5.1.7 中对我有用

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

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

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