Html CSS calc 在 Safari 和回退中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20443343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS calc not working in Safari and fallback
提问by Borsn
I have this layout I am working on. It strongly depends on CSS calc to do the necessary calculations.
我有我正在处理的布局。它强烈依赖于 CSS calc 来进行必要的计算。
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
Now, I can't get this to work in Safari. Is there something I'm doing wrong?
现在，我无法在 Safari 中使用它。有什么我做错了吗？
And also, is there a way I can introduce a fall-back mechanism for browsers that don't support it? Percentage wont do a good job, since I have to subtract the object in the middle, from the two on the side.
而且，有没有办法为不支持它的浏览器引入回退机制？百分比不会做得很好，因为我必须从旁边的两个对象中减去中间的对象。
Thanks.
谢谢。
回答by Borsn
The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don't support CSS calc would only read.
我解决这个问题的方法是引入纯 CSS 回退，不支持 CSS calc 的旧浏览器只能读取。
figure.left {
width: 48%;
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
}
The left and right panels, get a width of 48% if the browser cannot read the calc values.
如果浏览器无法读取计算值，则左右面板的宽度为 48%。
figure.logo {
min-width: 40px;
width: 4%;
width: -webkit-calc(40px);
width: -moz-calc(40px);
width: calc(40px);
}
And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.
位于两个面板之间的徽标宽度为 4%。而且最小宽度为 40px。如果 calc 值可以被浏览器读取，它们是 40px。
回答by hkk
You're code looks fine, so I think the problem is browser compatibility. According to Mozilla Documentation, this feature works in Chrome, Firefox, and IE (the newer versions), but is nonexistent in Opera and is buggy in Safari. this questionfor more compatibility information. A much safer fallback/alternative would be to do your calculations in Javascript:
您的代码看起来不错，所以我认为问题在于浏览器兼容性。根据Mozilla 文档，此功能适用于 Chrome、Firefox 和 IE（较新版本），但在 Opera 中不存在，在 Safari 中存在问题。此问题以获取更多兼容性信息。更安全的后备/替代方法是在 Javascript 中进行计算：
if ($(document).width() >= 750){
$("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
// do something here for smaller values
}
You can use the jQuery .width()function to detect the width of the document, then set the width of your elements accordingly. But just warning you, try to keep as many of your styles outside of your scripts and inside your stylesheets because otherwise it will be unmaintainable.
您可以使用jQuery.width()函数来检测文档的宽度，然后相应地设置元素的宽度。但只是警告您，尽量将尽可能多的样式保留在脚本之外和样式表中，否则将无法维护。
If it still doesn't work in some browsers, use Modernizrto detect the browser/version/OS and then redirect them to a different version of the page.
如果它在某些浏览器中仍然不起作用，请使用Modernizr检测浏览器/版本/操作系统，然后将它们重定向到页面的不同版本。
Edit 1:Added responsiveness
Edit 2:Removed Interval
Edit 3:Added mention of Modernizr
编辑 1：添加响应性
编辑 2：删除间隔
编辑 3：添加了对 Modernizr 的提及
