web前端面试--浏览器兼容性问题、HTML5新标签、CSS媒体查询、CSS-hack、浏览器厂商前缀、优雅降级、渐进增强、

web前端面试

本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）

web面试题专栏：点击此处

---

---

前言

不同浏览器或者相同浏览器不同的版本内核，都可能引起兼容性问题，不只是dom，还有css以及js。

---

HTML兼容性

h5新标签只能兼容到ie9，如果想要兼容ie低版本浏览器，需要引入html5shiv.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

CSS兼容性

1. 媒体查询兼容性，ie9以下不支持媒体查询，需要引入response.js文件，其cdn写法如下：

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

2. CSS Hack：

• 属性前缀：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

.red { 
	_color: red; /* ie6 */
	*color: red; /* ie7 */
	color: red\9; /* ie8/9/10 */
}

• 选择器前缀：例如 IE6能识别 * html .class{}，IE7能识别 +html .class{}或者*:first-child+html .class{}。

*.red {} /* ie6 */
+.red {} /* ie7 */

• 条件注释：

针对所有IE(注：IE10+已经不再支持条件注释)：

<!--[if IE]>IE浏览器显示的内容 <![endif]-->

针对IE6及以下版本：

<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->

这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

• 厂商前缀：谷歌-webkit-、火狐-moz-、IE-ms-、欧朋-o-
• 其它兼容性：
  • ie老版本浮动造成的双边距问题：display:inline;
  • 图片间隙：父盒子设置font-size: 0; 或者图片设置display: block;
  • 块元素默认高度：overflow: hidden;

JavaScript兼容性

优雅降级（Graceful Degradation）和渐进增强（Progressive Enhancement）是两种前端开发的策略，用于处理不同浏览器和设备的兼容性问题。

优雅降级是指首先基于最新的浏览器和设备功能进行开发，然后逐步向下兼容旧的浏览器和设备。在优雅降级的策略中，开发人员首先构建一个在最新浏览器上具有完整功能的版本，然后针对旧的浏览器进行适配和修复，以确保在旧版本浏览器上仍然能够正常工作，尽量保持用户体验的一致性。

举个例子，假设我们正在开发一个网页应用，使用了一些HTML5的新特性和CSS3的样式效果。在优雅降级的策略下，我们首先在最新的浏览器上开发和测试应用，确保所有功能和效果正常运行。然后，我们会检查并修复在旧版本浏览器中可能出现的兼容性问题，例如使用Polyfills来模拟新特性，或者提供替代的样式效果。

渐进增强则是相反的策略，它是从基本功能开始，逐步增加更高级的功能和效果。在渐进增强的策略中，首先构建一个基本的、能在所有浏览器上正常工作的版本，然后针对支持更高级功能的浏览器，逐步添加更多的功能和效果，提升用户体验。

以同样的例子来说明，假设我们使用渐进增强的策略开发网页应用。我们首先构建一个基本的版本，确保在所有浏览器上都能正常运行，即使没有使用HTML5和CSS3的新特性。然后，我们可以检测浏览器的功能支持，并根据支持情况逐步添加更高级的功能和效果，例如使用媒体查询来适配不同屏幕尺寸，或者使用CSS3动画来提升用户界面的交互效果。

总的来说，优雅降级和渐进增强都是处理浏览器兼容性问题的策略，只是在开发的顺序和重点上有所不同。优雅降级注重先构建完整功能的版本，然后向下兼容旧浏览器，而渐进增强注重先构建基本版本，然后逐步增加更高级的功能和效果。选择哪种策略取决于项目需求和目标用户的浏览器环境。