【CSS】【待更】IE瀏覽器各版本hack及常見兼容性問題解決

.class{
    width: 1000px\9;/* IE10 | IE9 | IE8 | IE7 | IE6 */
    width: 1000px\0;/* IE10 | IE9 | IE8 */ 
    width: 1000px\9\0;/* IE10 | IE9 */ 
    *width: 1000px;/* IE7 | IE6 */
    +width: 1000px;/* IE7 | IE6 不支持less轉(zhuǎn)換,不推薦 */ 
    -width: 1000px;/* IE6 */
    width: 1000px !important;/* 除IE6之外 */  
}

1.IE7及IE7以下不支持通過display:inline-block將行內(nèi)元素轉(zhuǎn)為行內(nèi)塊級元素

 *float: left|right;/* IE7及IE7以下*/ 
display: inline-block;/* IE7以上*/

2.IE8及IE8以下不支持通過rgba設(shè)置有透明度的背景顏色

CSS參考手冊之CSS3 filter(濾鏡) 屬性

$\color{#ff0000}{!!!}$ 會連這個容器里面的所有元素一起改變透明度

background: rgb(0,0,0)\9;/* IE9及IE9以下*/ 
filter: alpha(opacity=20)\9;/* IE9及IE9以下*/ 
//上面兩句卸載前面的目的是因為\9這個hack支持IE10及以下,但是IE9支持 rgba,所以在IE9中,后面background會覆蓋前面background
background: rgba(0,0,0,0.2);/* IE9及IE9以上 */

3.IE8及IE8以下不支持通過background-size屬性設(shè)置背景圖片大小

4.IE8及IE8以下不支持通過box-shadow屬性設(shè)置陰影

可以使用filter屬性

CSS參考手冊之CSS3 filter(濾鏡) 屬性

 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);/* IE8及IE8以下*/

參數(shù)	說明
strength	陰影大小
direction	陰影方位，單位為度炊汹，可以為負數(shù)
color	陰影顏色（盡量使用數(shù)字）

$\color{#ff0000}{!!!}$ 使用IE濾鏡實現(xiàn)盒子陰影的盒子必須是行元素block或以行元素inline-block顯示

4.IE8及IE8以下不支持通過:nth-child()屬性選取元素

方法1.使用jquery

$(function(){
 $('.className:nth-child(even)').addClass('classname')
 });

方法2.使用`first-child`與`element+element` 選擇器

CSS參考手冊之CSS element+element 選擇器相鄰兄弟選擇器
 CSS參考手冊之CSS :first-child 偽元素

HTML

<div class="className"></div>
<div class="className"></div>
<div class="className"></div>
<div class="className"></div>

.className:first-child{
    // 樣式
}// 選取第1個div
.className:first-child+div+div{
    // 樣式
}// 選取第3個div

參考文檔網(wǎng)址：
box-shadow兼容IE8瀏覽器寫法
 針對IE瀏覽器單獨寫CSS樣式的幾種方法
 各種瀏覽器的Hack寫法(chrome firefox ie等)
hack css編寫ie下才生效的css

最后編輯于：2019.12.18 13:23:56

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者