2024年前端面试题之——兼容篇_跨浏览器兼容面试题，2024年最新五面拿下阿里飞猪offer

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

（一）html 部分
1.H5 新标签在 IE9 以下的浏览器识别 <!--[if lt IE 9]> <script type="text/javascript" src="js/html5shiv.js"></script> <![endif]--> html5shiv.js 下载地址
2.ul 标签内外边距问题 ul 标签在 IE6\IE7 中，有个默认的外边距，但是在 IE8 以上及其他浏览器中 有个默认的内边距。解决方法：统一设置 ul 的内外边距为 0
（二）CSS 样式的兼容性
1.css 的 hack 问题：主要针对 IE 的不同版本，不同的浏览器的写法不同 IE 的条件注释 hack：

<!--[if IE 6]>此处内容只有 IE6.0 可见<![endif]-->
<!--[if IE 7]>此处内容只有 IE7.0 可见<![endif]-->

2.IE6 双边距问题：IE6 在浮动后，又有横向的 margin，此时，该元素的外边距是其值的 2 倍 解决办法：display:block;
3.IE6 下图片的下方有空隙 解决方法：给 img 设置 display:block;
4.IE6 下两个 float 之间会有个 3px 的 bug 解决办法：给右边的元素也设置 float:left;
5.IE6 下没有 min-width 的概念，其默认的 width 就是 min-width
6.IE6 下在使用 margin:0 auto;无法使其居中 解决办法：为其父容器设置 text-align:center;
7.被点击过后的超链接不再具有 hover 和 active 属性 解决办法:按 lvha 的顺序书写 css 样式，
“:link”: a 标签还未被访问的状态；
“:visited”: a 标签已被访问过的状态；
“:hover”: 鼠标悬停在 a 标签上的状态；
“:active”: a 标签被鼠标按着时的状态；
8.在使用绝对定位或者相对定位后，IE 中设置 z-index 失效，原因是因为其元素依赖于父元素的 z-index，但是父元素默认为 0， 子高父低，所以不会改变显示的顺序 ；
9.IE6 下无法设置 1px 的行高，原因是由其默认行高引起的 解决办法：为期设置 overflow:hidden;或者 line-height:1px;
（三）JavaScript 的兼容性
1.标准的事件绑定方法函数为 addEventListener，但 IE 下是 attachEvent；
2.事件的捕获方式不一致，标准浏览器是由外至内，而 IE 是由内到外，但是最后的结果是将 IE 的标 准定为标准
3.window.event 获取的。并且获取目标元素的方法也不同，标准浏览器是 event.target，而 IE 下 是 event.srcElement

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)