一、問題描述

        在進行代碼編寫的時候發(fā)現(xiàn)給antd的inputNumber組件設置width時，不生效。嘗試多次無果后，問了同事，同事掏出了一個關鍵字 -webkit-fill-available 后成功生效。

        所以對其產生了興趣，在網上檢索下，用的必應竟然沒找到相關信息。

        （想起來了，不是必應檢索不到，是因為過濾機制，在關鍵詞前添加-起到過濾作用。）

        覺得這個屬性值是兩個字段的拼接，于是檢索了fill-available，順勢摸到了stackoverflow的答案。話說之后又用百度，這次倒是發(fā)揮了其應有的檢索作用，首頁就看到了解答。要是能用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是生效的，其他的不知道行不行，沒試過。有時間可以試下