CSS Calc无法在Safari和后备中使用

尼克

我正在使用此布局。很大程度上取决于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。如果浏览器可以读取calc值,则该值为40px。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS Calc无法在Safari和后备中使用

来自分类Dev

是否可以在Firefox和Safari的CSS calc()中使用百分比?

来自分类Dev

CSS动画无法在Safari中使用

来自分类Dev

无法在FireFox 29.0.1中使用CSS calc()

来自分类Dev

在CSS Calc中使用自动

来自分类Dev

在步骤中使用css calc()

来自分类Dev

在jQuery中使用css calc()

来自分类Dev

SVG图片“填充”属性的CSS动画无法在Safari中使用

来自分类Dev

使用CSS的后备图片

来自分类Dev

在CSS Calc函数中使用模数

来自分类Dev

在视口单位中使用CSS Calc

来自分类Dev

如何在顺风CSS中使用calc()?

来自分类Dev

如何在CSS的`display`属性中使用后备值?

来自分类Dev

如何在CSS变量后备广告中使用逗号?

来自分类Dev

CSS - Calc 无法使用固定位置

来自分类Dev

无法在HTML中使用CSS

来自分类Dev

无法在CSS中使用断点

来自分类Dev

CSS Calc和Min-height无法正确组合

来自分类Dev

css calc和min-height无法正确组合

来自分类Dev

CSS动画可以在Chrome和Safari中使用,但不能在Firefox和Internet Explorer中使用

来自分类Dev

在Firefox中使用JavaScript读取涉及calc()的CSS属性

来自分类Dev

在React Js中使用CSS / Jquery calc函数

来自分类Dev

如何在calc函数中使用CSS变量

来自分类Dev

如何在React Render中使用Calc CSS函数

来自分类Dev

在 React 组件的 JS 中使用 CSS 中的 calc 函数

来自分类Dev

使用较少,CSS3 calc()无法正常工作

来自分类Dev

CSS Calc在Safari上不起作用

来自分类Dev

无法在Chrome / Safari中结合使用CSS Sprite和背景渐变

来自分类Dev

无法获取在Safari中使用calc()的位置计算风格