我正在处理这个布局。 它强烈依赖 CSS calc 来进行必要的计算。
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
现在，我无法让它在 Safari 中运行。是不是我做错了什么？
另外，有没有一种方法可以为不支持的浏览器引入回退机制？百分比不会做得很好，因为我必须从侧面的两个中减去中间的对象。
谢谢。
【问题讨论】：
我解决这个问题的方法是引入纯 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。
【讨论】：
您的代码看起来不错，所以我认为问题在于浏览器兼容性。根据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 的提及
【讨论】：