部分ie8不相容的css問題
阿新 • • 發佈:2018-12-26
1、解決在ie8中input框的輸入頂格顯示問題
一般寫input框我們為了好看會給行高,但是ie8中input框的輸入就會頂格顯示,為了解決這個問題網上都給出使用行高line-height,但是我使用這個還是沒有解決。最後我去除height與line-height,使用padding-top與padding-bottom代替就可以了。
2、解決在ie8中background-size問題
background-size是css3式樣,在ie8中不相容,為了避免我們無法改變圖片的大小,我們可以使用<img src="">引用圖片而不是使用background:url(),使用<img>引用之後我們可以根據圖片的width、height對圖片的大小進行控制。
3、解決在ie8中透明度問題
對於使用background: rgba(34, 27, 19,.3);ie8是不相容的,我們可以使用
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#66000000', EndColorStr='#66000000');來解決i8的相容性。
計算方法:StartColorStr、EndColorStr中的‘#66000000’前兩位代表透明度,後六位代表顏色值
下面我們給出rgba與ie下filter數值轉換值
rgba透明值 | ie8中filter的值 |
0.1 | 19 |
0.2 | 33 |
0.3 | 4C |
0.4 | 66 |
0.5 | 7F |
0.6 | 99 |
0.7 | B2 |
0.8 | C8 |
0.9 | E5 |
對於這個問題我們可以使用圖片代替
5、對於子元素選擇問題,nth-child()
我們可以直接使用class代替,在ie8中nth-child()是不顯示的
以上都是我所遇到的,希望能對大家有所幫助