一、問(wèn)題描述

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

        所以對(duì)其產(chǎn)生了興趣，在網(wǎng)上檢索下，用的必應(yīng)竟然沒(méi)找到相關(guān)信息。

        （想起來(lái)了，不是必應(yīng)檢索不到，是因?yàn)檫^(guò)濾機(jī)制，在關(guān)鍵詞前添加-起到過(guò)濾作用。）

        覺(jué)得這個(gè)屬性值是兩個(gè)字段的拼接，于是檢索了fill-available，順勢(shì)摸到了stackoverflow的答案。話說(shuō)之后又用百度，這次倒是發(fā)揮了其應(yīng)有的檢索作用，首頁(yè)就看到了解答。要是能用google就好了，一把辛酸淚

        stackoverflow的答案就已經(jīng)講的很清楚了

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

        在下面再贅述一下

二、詳細(xì)解釋

width: -webkit-fill-available;

        這個(gè)屬性值需要分塊理解。

        首先是 -webkit- ，這是一個(gè)前綴，瀏覽器廠商會(huì)在屬性前加一個(gè)私有的前綴來(lái)支持新屬性。這個(gè)前綴指能夠在以webkit為內(nèi)核的瀏覽器中正常使用。以webkit為內(nèi)核的瀏覽器代表有safari和chrome

        其次是 fill-available，是css的自適應(yīng)關(guān)鍵字，其作用為撐滿可用空間。

【注】該關(guān)鍵字IE瀏覽器不支持

三、解決方案

        想讓這個(gè)屬性值在所有瀏覽器都生效，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是生效的，其他的不知道行不行，沒(méi)試過(guò)。有時(shí)間可以試下