隨著越來越多的人開始使用IE11,CSS兼容性也開始成為開發(fā)者們的一項(xiàng)重要關(guān)注。雖然IE11較之前版本的IE瀏覽器已經(jīng)有了很大的進(jìn)步,但仍然存在一些兼容性問題。以下是一些可以幫助您解決IE11 CSS兼容性問題的技巧。
p { display: inline-block; /* 在IE11中實(shí)現(xiàn)塊級(jí)元素的水平對(duì)齊 */ *display: inline; /* IE6-IE11中應(yīng)用非標(biāo)準(zhǔn)屬性 */ zoom: 1; /* 在IE7-IE11中修復(fù)IE的布局BUG */ }
當(dāng)使用IE11時(shí),經(jīng)常會(huì)發(fā)現(xiàn)一些元素的表現(xiàn)與其他主流瀏覽器有所不同。要修復(fù)這種問題,我們可以使用display:inline-block來替代display:block,這可以讓元素變?yōu)樾袃?nèi)塊級(jí)元素,從而在IE11中實(shí)現(xiàn)塊級(jí)元素的水平對(duì)齊。但是要注意的是,它不能在IE7及以前版本中使用。
另一個(gè)需要注意的是星號(hào)屬性。在IE6-IE11中,如果一個(gè)CSS屬性值不與標(biāo)準(zhǔn)相符,那么我們可以用星號(hào)作為屬性的開頭, *property: value,從而讓IE識(shí)別非標(biāo)準(zhǔn)的CSS屬性。但這個(gè)技巧在IE11中已經(jīng)不再建議使用,更好的方法是使用hack,比如使用'@media screen and (-ms-high-contrast: active), (--ms-high-contrast: active)'固定選擇IE瀏覽器。
.box{ background-color: rgba(0,0,0,0.5); /* 在IE9-IE11中實(shí)現(xiàn)半透明背景 */ background-color: #000\9; /* 在IE6-IE11中回退到不透明背景色 */ filter: alpha(opacity=50); /* 在IE8中實(shí)現(xiàn)透明度 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* 在IE8-IE9中實(shí)現(xiàn)透明度 */ }
同時(shí),當(dāng)您嘗試使用半透明背景時(shí),您也可能會(huì)在IE9到IE11上遇到一些問題。這是因?yàn)榇税姹镜腎E瀏覽器支持rgba但不支持opacity屬性。為了在IE9-IE11中實(shí)現(xiàn)半透明背景,我們需要使用rgba()替代opacity屬性,而在IE6-IE8版本中,通過使用透明的PNG圖片,或者用純白色的背景加上不透明度來替代rgba。
最后,當(dāng)我們需要在IE8及以下版本中使用透明度時(shí),我們可以用filter和-ms-filter樣式來達(dá)到效果。其中filter屬性是IE瀏覽器自帶的,而-ms-filter屬性則是微軟為開發(fā)者們提供的自定透明度解決方案。
總之,如果您確定要支持IE11瀏覽器,那么您需要根據(jù)這些技巧來針對(duì)這個(gè)版本進(jìn)行CSS兼容性處理。對(duì)于那些確實(shí)無法支持,您可以考慮在代碼中添加hack, 或者建議用戶使用更現(xiàn)代化的瀏覽器。