Question

我正在进行这种布局。它很大程度上取决于CSS calc来进行必要的计算。

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

现在，我无法在Safari中使用它。有什么我做错了吗？

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

感谢。

Answer 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。如果浏览器可以读取calc值，则它们是40px。

Answer 2

你的代码看起来很好，所以我认为问题是浏览器兼容性。根据{{3}}，此功能适用于Chrome，Firefox和IE（较新版本），但在Opera中不存在，并且在Safari中存在问题。 Mozilla Documentation了解更多兼容性信息。一个更安全的后备/替代方案是在Javascript中进行计算：

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

您可以使用this question功能检测文档的宽度，然后相应地设置元素的宽度。但只是警告你，尽量在脚本之外和样式表中保留你的样式，否则它将无法维护。

如果在某些浏览器中仍无效，请使用jQuery .width()检测浏览器/版本/操作系统，然后将其重定向到该页面的其他版本。

编辑1：添加了响应性 修改2：删除间隔
编辑3：添加了Modernizr

的提及

CSS calc无法在Safari和后备中运行

2 个答案: