calc的兼容处理

博客介绍了CSS3中calc()在不同浏览器的支持情况,在iOS6浏览器中使用calc()必须加-webkit-前缀,FF浏览器已无需-moz-前缀,Android浏览器目前仍不支持。同时给出解决办法,一是增加保守尺寸,二是根据css BFC规则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS3中的calc()在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。 Android浏览器目前仍然不支持calc()
办法:
1增加一个保守尺寸

 div { 
  width: 95%; 
  width: -webkit-calc(100% - 100px); 
  width: calc(100% - 100px); 
}

2根据css BFC规则

<div class="column"></div>
<div class="column"></div>

     .column:nth-of-type(1) {
            float: left;
            width: 100px;
            height: 300px;   
            background-color: red;
        }
        
        .column:nth-of-type(2) {
            overflow: hidden;/*创建bfc */
            height: 300px;
            background-color: purple;
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值