我正在使用此布局。很大程度上取决于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] 删除。
我来说两句