在前端開發中,我們通常需要針對不同的瀏覽器進行適配,而IE9是一個比較特殊的瀏覽器,因為它對CSS支持有些限制。因此,我們需要在編寫CSS代碼時單獨處理IE9的兼容性問題,下面是一個簡單的示例。
/* 實現高度自適應的效果 */ div{ height:auto !important; height:100%; } /* 處理IE9中不支持box-sizing的問題 */ div{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } /* 處理IE9中不支持rgba顏色值的問題 */ div{ background-color: #000000; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } /* 處理IE9中不支持CSS3的transition過渡效果的問題 */ div{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
上述代碼中,我們針對IE9不支持的CSS屬性或屬性值做了特別的處理,以實現在IE9中正確地顯示頁面的效果。
我們可以使用條件注釋來加載這些針對IE9的CSS代碼:
<!--[if IE 9]> <link rel="stylesheet" href="ie9.css"> <![endif]-->
這樣,我們就可以將這些CSS代碼單獨放在一個ie9.css文件中,并使用條件注釋來在IE9瀏覽器中加載它們。
上一篇css 單冒號和雙冒號
下一篇css3旋轉燈籠