calc的兼容处理

最新推荐文章于 2025-04-30 11:50:00 发布

原创最新推荐文章于 2025-04-30 11:50:00 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

手机端开发专栏收录该内容

9 篇文章

订阅专栏

博客介绍了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;
        }