【CSS】关键字 -webkit-fill-available 详解

本文探讨了CSS中 `-webkit-fill-available` 关键字的问题,它用于使元素在WebKit内核的浏览器(如Safari和Chrome)中填充可用空间。当在antd的inputNumber组件设置width时,常规方法未生效,使用此关键字解决了问题。虽然不被IE浏览器支持,但StackOverflow提供了兼容性解决方案。

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

目录

一、问题描述

二、详细解释

三、解决方案


一、问题描述

        在进行代码编写的时候发现给antd的inputNumber组件设置width时,不生效。尝试多次无果后,问了同事,同事掏出了一个关键字 -webkit-fill-available 后成功生效。

        所以对其产生了兴趣,在网上检索下,用的必应竟然没找到相关信息。

        (想起来了,不是必应检索不到,是因为过滤机制,在关键词前添加-起到过滤作用。)

        觉得这个属性值是两个字段的拼接,于是检索了fill-available,顺势摸到了stackoverflow的答案。话说之后又用百度,这次倒是发挥了其应有的检索作用,首页就看到了解答。要是能用google就好了,一把辛酸泪

        stackoverflow的答案就已经讲的很清楚了

        css - what is the usage of -webkit-fill-available? - Stack Overflow

        在下面再赘述一下

二、详细解释

width: -webkit-fill-available;

        这个属性值需要分块理解。

        首先是 -webkit- ,这是一个前缀,浏览器厂商会在属性前加一个私有的前缀来支持新属性。这个前缀指能够在以webkit为内核的浏览器中正常使用。以webkit为内核的浏览器代表有safarichrome

        其次是 fill-available,是css的自适应关键字,其作用为撑满可用空间。

【注】该关键字IE浏览器不支持

三、解决方案

        想让这个属性值在所有浏览器都生效,stackoverflow提供如下写法

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

        我用的是chrome是生效的,其他的不知道行不行,没试过。有时间可以试下

       

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值