CSS calc 在 Safari 和回退中不起作用

Posted 2023-03-15

【中文标题】CSS calc 在 Safari 和回退中不起作用

【英文标题】：CSS calc not working in Safari and fallback

【发布时间】：2013-12-24 22:50:57

【问题描述】：

我正在处理这个布局。 它强烈依赖 CSS calc 来进行必要的计算。

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

现在，我无法让它在 Safari 中运行。是不是我做错了什么？

另外，有没有一种方法可以为不支持的浏览器引入回退机制？百分比不会做得很好，因为我必须从侧面的两个中减去中间的对象。

谢谢。

【问题讨论】：

重要提示：Safari 3.1 到 5.1 不支持此 Web 元素。 Safari 6 使用前缀 -webkit- 部分支持此属性。Safari 6.1 到 11.1 支持此属性。

【参考方案1】：

我解决这个问题的方法是引入纯 CSS 后备，不支持 CSS calc 的旧浏览器只能读取。

figure.left 
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);

如果浏览器无法读取计算值，则左右面板的宽度为 48%。

figure.logo    
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);

位于两个面板之间的徽标的宽度为 4%。并且最小宽度为 40px。如果计算值可以被浏览器读取，则为 40px。

【讨论】：

旧浏览器最安全的方法

注意：在计算解决方案之前添加备用解决方案很重要。

【参考方案2】：

您的代码看起来不错，所以我认为问题在于浏览器兼容性。根据Mozilla Documentation 的说法，此功能在 Chrome、Firefox 和 IE（较新版本）中有效，但在 Opera 中不存在，并且在 Safari 中存在错误。 this question 了解更多兼容性信息。一个更安全的后备/替代方法是在 javascript 中进行计算：

if ($(document).width() >= 750)
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
 else if ($(document).width() >= 400)
  // do something here for smaller values

您可以使用jQuery .width() 函数来检测文档的宽度，然后相应地设置元素的宽度。但只是警告您，尽量将尽可能多的样式保留在脚本之外和样式表中，否则将无法维护。

如果在某些浏览器中仍然无法正常工作，请使用Modernizr 检测浏览器/版本/操作系统，然后将它们重定向到页面的不同版本。

编辑 1： 增加了响应能力编辑 2： 删除了间隔编辑 3： 增加了对 Modernizr 的提及

【讨论】：

这看起来很有希望，谢谢。不过，我将如何将此 JS 与页面的响应性结合起来。有什么方法可以定位 CSS 文档或 @media 标签？

抱歉，我刚刚意识到我的代码中存在最愚蠢的错误 - 每次执行间隔时，宽度都会减半，因此很快就会崩溃。尝试删除它，它应该可以工作。

好的。这解决了问题。但在 Safari 中仍然无法使用。还有什么问题吗？谢谢。

您使用的是什么版本的 Safari？

Safari 5.1。在窗户上。