overflow屬性便捷語法的不兼容問題

overflow屬性的便捷語法

CSS的overflow屬性定義當一個元素的內容太大而沒法適應 塊級格式化上下文 時候該作什麼。是overflow-x和overflow-y的簡寫屬性。

通常，咱們會賦予它單個值，好比visible，hidden，scroll。這裏介紹一下該屬性的便捷語法，賦予兩個值，分別控制overflow-x和overflow-y。
好比：overflow: hidden auto;至關於overflow-y:hidden; overflow-x: auto;

以上就是overflow屬性的便捷語法。

便捷語法須要注意的問題

overflow的便捷語法是個比較新的屬性。 可能習慣了CSS便捷寫法的咱們會認爲，這種寫法理所固然的早就應該支持。然而事實不是這樣——
overflow便捷語法對應的overflow-x和overflow-y的順序，還還沒有達成一致。根據MDN的說法，爲了匹配使用新邏輯屬性overflow-block和overflow-inline時的順序，Firefox 63就嘗試將以前的順序顛倒了一遍。然而到如今，FireFox 67依然沒有作出這樣的更新，Chrome 74也沒有。展現以下：

FireFox 67

Chrome 74

至於移動端的瀏覽器，筆者並未過多測試，估計目前採起的作法是取第一個值。

總結

關於筆者爲什麼調查這麼蛋疼的問題，固然是由於工做中遇到了問題。Chrome中白紙黑字，明確告訴筆者的先X後Y的順序，到了iOS的移動端，不論safari仍是webview，都沒有正確的展示——
overflow: hidden auto;本意是x軸隱藏，y軸滾動，到了iOS移動端，y軸就是不按照規則滾動；待筆者改成overflow: auto hidden;，y軸才正常滾動。因而有此文。