目錄

一、問題描述

二、詳細解釋

三、解決方案

---

一、問題描述

? ? ? ? 在進行代碼編寫的時候發現給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是生效的，其他的不知道行不行，沒試過。有時間可以試下

? ? ? ?

總結

以上是生活随笔為你收集整理的【CSS】关键字 -webkit-fill-available 详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。