"这份文档是一个关于面试中常见的HTML和JavaScript兼容性问题的总结,主要关注如何处理不同浏览器之间的差异,特别是对Internet Explorer的兼容策略。"
在HTML方面,随着HTML5新标签的引入,它们在旧版IE浏览器(如IE9以下)中可能无法识别。为了解决这个问题,可以使用`html5shiv.js`这个库,它的CDN链接是`<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>`。这个脚本使得旧版IE能够识别和渲染H5的新元素。
在CSS兼容性上,有以下几个关键点:
1. 媒体查询:IE9以下版本不支持媒体查询,可以引入`respond.js`库来实现兼容,其CDN链接是`<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>`。
2. CSS Hack:包括属性前缀(如IE6-10识别`\9`),选择器前缀(如`*html.class`和`+html.class`),以及条件注释(如`<!--[if IE]>...<![endif]-->`)来针对不同版本的IE应用特定样式。
3. 厂商前缀:使用 `-webkit-`, `-moz-`, `-ms-`, 和 `-o-` 来确保不同浏览器对CSS3特性的支持。
JavaScript的兼容性问题主要包括:
1. 渐进增强和优雅降级策略,即先为现代浏览器编写代码,然后逐步添加对旧版浏览器的支持。
2. 对于一些旧版IE中的JavaScript特性,可能需要额外的处理,比如使用jQuery等库来扩展功能,或者使用条件注释加载特定的 polyfill。
这部分内容还提到了一些CSS的其他兼容性技巧,如:
1. 解决IE老版本的浮动元素造成的双边距问题,可以通过设置`display:inline`。
2. 消除图片间的间隙,可以将父容器的`font-size`设为0或图片的`display`设为`block`。
3. 防止块元素默认的高度塌陷,可以使用`overflow:hidden`。
这些技巧和方法都是开发者在面对浏览器兼容性挑战时需要掌握的关键知识,尤其是在面试中,能够展示出你对前端开发中跨浏览器兼容性的理解和实践经验。