分享编程~
 

css3宽度高度百分比减去固定值失效问题解决

css3中calc百分比减去一个固定值时不起作用解决方案,以及浏览器兼容问题。

天天特卖抢好货

css3中设置页面高度或者宽度的时候,用到百分比减去一个固定值时用到了calc属性,有时候竟然不起作用了,最后发现竟然是运算符左右两边没有空格!

错误的写法:

width:calc(100%-10px);

正确的写法:

width:calc(100% - 10px);

扩展信息

calc属性

calc()是css3新添加属性,可以使用一个算术表达式来表达长度值,比如来定义盒子的宽度,并设置margin、padding、border等。

calc()的运算规则:

    1、使用”+”、”-”、”*”、”/”四则运算,使用标准的数学运算优先级规则,运算符前后需要保留一个空格;

    2、可以使用百分比、px、em、rem等单位,可以混合使用各种单位进行计算;

    3、任何长度值都可以使用calc()函数进行计算;

浏览器兼容性

    IE:ie9以上,支持原生写法,calc();

    chrome:从19 dev版,开始支持私有的-webkit-calc()写法;26.0+支持原始写法;

    firefox:4.0+已经开支支持calc()功能,需要使用-moz-calc()私有属性,16.0+支持原生写法;

    Opera:15.0+支持原生写法;

    Android Browser:2.1-4.3不支持,4.4-4.4.4部分支持,更高版本以上支持原生写法;

    iOS Safari:6.0-6.1支持-webkit-calc()写法;7.0+支持原始写法;


上一篇:纯js实现网页内容复制后自动追加自定义内容下一篇:纯css设置table表格样式简单方法
赞(4) 踩(0)
您说多少就多少,您的支持是我最大的动力
赏金
微 信
赏金
支付宝
本文连接: https://www.yj521.com/article/122.html
版权声明: 本文为原创文章,版权归《越加网》所有,分享转载请注明出处!