前端兼容性问题总结，2024最新阿里前端高级面试题及答案

pineapple

• peach

• orange

  IE可能出现的文档样式短暂失效问题

  css 篇

  =====

  双倍间距问题

  /一下代码在 IE6 中会出现双倍间距/

  #box{

  float: left;

  margin: 10px;

  }

  //解决方法

  #box{

  float: left;

  margin: 10px;

  display: inline;

  }

  错位问题

  /IE6中，这样的多个盒子并列时会发生向下偏移，应该对偏移的盒子添加负 margin-top 进行修正/

  .box{

  float: left;

  }

  IE6 奇数宽高问题

  IE6 中盒子的宽(width) 和高(height)设置为奇数时会有 bug，尽量设置为偶数即可。

  IE6 Peekaboo Bug

  一个 div#top 中加入一个 div#float 向左浮动，然后加入一个或多个 div, 直到清除浮动为止：

  float div
  inside-div text!
  inside-div text!
  clear div

  解决方法，给 #top 一个 height 或 width ：

  #top{

  height: 300px;

  }

  盒子坍塌

  这个问题比较普遍，在盒内层元素设置外边距时会发生

  /发生盒子坍塌/

  #box{

  height: 300px;

  }

  #box .inner-box{

  margin:20px;

  }

  /修正/

  #box{

  height: 300px;

  margin-top: -20px;

  }

  #box .inner-box{

  margin:20px;

  }

  文字大小

  字体大小在不同浏览上不一致。例如font-size:14px，在 IE 中的实际行高是16px，下面有3px留白；在 Firefox 中的实际行高是17px，下面有3px留白，上边1px留白；在 opera 中就更不一样了。解决方式统一指定行高 line-height

  html{

  font-size: 14px;

  line-height: 14px;

  }

  另外，我们会遇到 font-size:62.5% 这样的定义，为了把默认的 16px 映射为 10px, 这样1em = 10px 更利于计算。

  去除元素默认边距

  有很多元素默认带有边距，对我们排版很不利。但利用通配符*去除边距存在性能问题，所以用下面语句清除默认边距

  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{

  margin: 0;

  padding: 0;

  }

  低版本 IE 高度限定失效

  一般的元素指定高度属性 height 可以固定该元素高度，但在低版本 IE 中无法固定元素高度，该元素高度依然会被内容撑开，需要注意。(宽度也一样)

  IE6 不支持 png 透明效果

  解决方式用滤镜

  #box{

  _background: none;

  filter: progid:DXImageTransForm.Microsoft.AlphaImageLoader(src=‘路径’);

  }

  Firefox 的宽度问题

  Firefox浏览器会的 body 比其他浏览器的 body 宽度小1个像素，注意设置其子元素（尤其 float 元素大小，防止排版混乱。

  IE6中的吞吃问题

  IE6 中为上下2个 div 中的上一个地址设置背景时，下一个 div 也会带有背景。类似的还有 overflow:scroll 时，出现的滚动条不完整。应该 分别对在上方的 div 和滚动条不完整的 div 加 zoom: 1样式。

  IE6 图片格式问题

  IE6 中的图片默认存在边框，应统一去除。同时图片下方会有空隙，用 font-size解决

  img{

  border: none;

  font-size: 0;

  }

  IE中无法定义1px高度这样的小盒子

  IE6 中的空元素高度不能低于19px，解决方式有四种：

  1. 在元素中插入空注释 <!---->

  2. 在元素中插入空格  

  3. 加入 css: overflow:hidden;

  4. 加入 css: font-size: 0;

  IE6 z-index 失效

  当父元素已设置 z-index 属性后，子元素的 z-index 会失效。

  IE6中 select 始终高于 div

  浮层 div 出现时隐藏 select，浮层 div 消失时再显示 select。

  让 chrome 支持小于 12px 的字体

  #box{

  font-size: 8px;

  -webkit-text-size-adjust: none;

  }

  /* 但是，上面这个方法 chrome27 以后就不能用了。但我们可以用 css3 解决这个问题 */

  #box{

  font-size: 12px;

  -webkit-transform: scale(0.75);

  }

  CSS Hack

  兼容性属性设置，注意书写顺序：优先写高等级浏览器支持方式、优先写支持浏览器多的方式

  /以 color 属性为例，注意书写顺序/

  #box{

  color: #f00; //所有浏览器都支持

  color: #0f0 !important; //只有 IE6 无效

  color: #00f\9; //所有 IE 都有效

  color: #ff0\0; //IE8+ 有效

  color: #f0f\9\0; //IE9+ 有效

  *color: #fff; //仅 IE6, IE7 有效

  #color: #0ff; //仅 IE6, IE7 有效

  +color: #800; //仅 IE6, IE7 有效

  -color: #008; //只有 IE6 有效

  _color: #080; //只有 IE6 有效

  }

  由于后定义的属性覆盖先定义的属性，所有上面设置最后的效果为：

  IE6 为 #080

  IE7 为 #800

  IE8 为 #ff0

  IE9,10 为 #0f0

  其他 为 #f00

  javascript 篇

  ============

  innerText 和 innerContent

  1. innerText 和 textContent 的作用相同

  2. innerText IE8之前的浏览器支持

  3. innerContent 老版本的Firefox支持

  4. 新版本的浏览器两种方式都支持

  和以上四种情况完全一致的还有parentElement(老IE)和parentNode

  获取兄弟节点/元素的兼容性问题

  ie8以前不支持previousElementSibling和nextElementSibling,以及诸如此类带有Element的元素属性。利用previousSibling和

  nextSibling等不带Element的属性实现如下：

  // 获取下一个紧邻的兄弟元素

  function getNextElement(element){

  var ele = element;

  if(ele.nextElementSibling) return ele.nextElementSibling;

  do{

  ele = ele.nextSibling;

  }while(ele && ele.nodeType !== 1);

  return ele;

  }

  // 获取上一个紧邻的兄弟元素

  function getPreviousElement(element){

  var ele = element;

  if(ele.perviousElementSibling) return ele.perviousElementSibling;

  do{

  ele = ele.perviousSibling;

  }while(ele && ele.nodeType !== 1);

  return ele;

  }

  // 获取第一个子元素

  function getFirstElement(parent){

  if(parent.firstElementChild) return parent.firstElementChild;

  var ele = parent.firstChild;

  while(ele && ele.nodeType !== 1) ele = ele.nextSibling;

  return ele;

  }

  // 获取最后一个子元素

  function getLastElement(parent){

  if(parent.LastElementChild) return parent.LastElementChild;

  var ele = parent.lastChild;

  while(ele && ele.nodeType !== 1) ele = ele.perviousSibling;

  return ele;

  }

  // 获取所有兄弟元素

  function sibling(ele){

  if(!ele) return null;

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  总结

  大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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

  [外链图片转存中…(img-afHjBd6P-1711824921133)]
  [外链图片转存中…(img-hAHoFJdb-1711824921133)]
  [外链图片转存中…(img-oCH1faso-1711824921134)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-WhW79wDS-1711824921134)]

  总结

  大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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