IE10/11不支持条件性注释后的3种替代方法:
方法一:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术
IE9是支持条件性注释的。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
在html网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像IE6/7/8那样编写针对性的CSS代码了。但这样做有个弊端,很显然,浏览器这样就会开启IE9的渲染模式,而不是最新的IE10/11技术。
方法二:使用媒体查询语句+-ms-high-contrast属性
CSS 的媒体查询语句(media query)是一种高级的CSS条件语句,它能根据一些属性和属性值计算判断CSS是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就 是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的CSS,从而实现了条件性执行的效果。
方法三:使用Javascript判断浏览器的类型
先用JavaSCript判断是否是IE浏览器,如果是,就在页面的<html>标记上添加一个“ie”的类名:
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
document.documentElement.className += " ie";
}
IE6兼容性
解决低版本浏览器不支持css3和html5新特性的利器 ---
Modernizr——为HTML5和CSS3而生!
附,Modernizr检测清单:
1. @font-face 2. Canvas 3. Canvas Text 4. WebGL 5. HTML5 Audio 6. HTML5 Audio formats 7. HTML5 Video 8. HTML5 Video formats 9. rgba() 10. hsla() 11. border-image 12. border-radius 13. box-shadow 14. text-shadow 15. Multiple backgrounds 16. background-size 17. opacity 18. CSS Animations 19. CSS Columns 20. CSS Gradients 21. CSS Reflections 22. CSS 2D Transforms 23. CSS 3D Transforms 24. Flexible Box Model 25. CSS Transitions 26. Geolocation API 27. Input Types 28. Input Attributes 29. localStorage 30. sessionStorage 31. Web Workers 32. applicationCache 33. SVG 34. Inline SVG 35. SVG Clip paths 36. SMIL 37. Web SQL Database 38. IndexedDB 39. Web Sockets 40. hashchange Event 41. History Management 42. Drag and Drop 43. Cross-window Messaging 44. Touch Events