CSS hack是一種編寫(xiě)CSS代碼時(shí)可以用來(lái)解決不同瀏覽器的不兼容問(wèn)題的技巧。很多面試官在面試前端工程師時(shí)都會(huì)涉及到這個(gè)問(wèn)題,我們需要對(duì)不同種類(lèi)的CSS hack有足夠的了解。
下面是一些常見(jiàn)的CSS hack:
/* 針對(duì)IE6和IE7的hack */ selector { *property: value; /*IE6以下版本特殊處理*/ property: value; /*所有其他瀏覽器*/ _property: value; /*IE6-7*/ } /* 針對(duì)只有IE8及以下版本的hack */ selector { property: value\9; /*IE8-*/ } /* 針對(duì)只有IE9及以下版本的hack */ @media screen and (min-width:0\0) { selector { property: value; /*IE9-*/ } } /* 針對(duì)只有IE10及以上版本的hack */ @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { selector { property: value; /*IE10+*/ } }
除了以上列出的hack,還有一些其他的hack,例如條件注釋?zhuān)–onditional comments)、user agent hack等等。
然而,使用hack并不是解決瀏覽器兼容問(wèn)題的最好方式,因?yàn)樗鼤?huì)增加代碼的復(fù)雜度和維護(hù)成本。最好的方式是使用CSS3的屬性和HTML5的元素,同時(shí)采用漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的策略,從而降低兼容性問(wèn)題的出現(xiàn)。