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

一、问题描述

        在进行代码编写的时候发现给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为内核的浏览器代表有safari和chrome

        其次是 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是生效的，其他的不知道行不行，没试过。有时间可以试下