隨著時間的推移,越來越多的人開始拋棄ie11,但是在一些情況下,我們還是需要考慮兼容ie11。在使用css時,我們也需要學會一些技巧來適配ie11。
首先,我們需要注意的是一些ie11的樣式兼容問題。比如,在css中使用vw、vh單位,ie11是不支持的。我們需要使用一些hack來解決這個問題:
html {font-size: calc(100vw / 1366 * 100);} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { html {font-size: 16px;} }
其次,在一些css屬性上,ie11也有兼容問題,比如flex布局。在使用flex布局時,我們需要加上-ms前綴:
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
最后,我們還需要注意一些ie11的兼容性bug。比如,當我們使用transform屬性時,如果父元素設置了overflow:hidden,那么就會出現一些奇怪的bug。解決辦法是給父元素加上一個z-index:
.parent{ position: relative; z-index: 0; overflow: hidden; } .child{ position: absolute; transform: translatex(-50%); }
綜上所述,要適配ie11,我們需要在css中注意兼容性問題,并且學會一些hack技巧來解決不支持的屬性問題。同時,也要記得隨時關注ie11的兼容性bug,及時調整代碼,保證網頁在ie11上的正常顯示。
下一篇css密碼框間距過大