前端面试总结三

面试时被问到太多次浏览器兼容性问题，可是每次都不能回答得让面试官满意，要么回答得太简单，要么回答得自己都不知道自己说了什么。面试就是这样，平时很熟悉的东西，面试时就变得不熟悉了，平时了解的东西，面试时就变得一点都不懂了。

写这篇兼容性总结参照了 http://www.qdfuns.com/notes/21128/db10afdde2abe5f0b72d5945358987e3.html 和 http://www.qdfuns.com/notes/18090/961a36d50f2efa676061b5a02c374f75.html 这两篇文章

不同的浏览器使用的内核不一样，这些不同的内核是由不同的团队开发的，所以他们所使用的标准就不一样了，这就造成不同浏览器渲染出来的网页呈现的效果有差别了。

一、HTML 部分

1. 问题：IE9 及以下版本 IE 浏览器不支持 HTMl5 的标签

解决办法：我通常会在 css 中写上下面这些样式：

/* 让 IE 浏览器对不识别的 html5 元素将其当做块元素处理*/
details, main, summary { display: block; }

再导入 html5shiv.js 文件，文件可从 http://www.bootcdn.cn/ (前端开源项目 CDN 服务) 获取。

html5shiv is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements.

2. 问题：不同浏览器对不能显示的图片的处理方式不同

IE浏览器表现为一个小叉，后面跟上 alt 属性的值，firefox 浏览器只显示 alt 属性的值，chrome 显示一张破损的小图加上 alt 属性的值，并在他们的外围加上边框。

IE:

firefox:

chrome:

这个还真不知道如何解决，如非要达到一致的话，就把图片的地址写正确吧。

3. IE 9 及之前的版本不支持 <input> 标签的 placeholder 属性

当前项目有下面一段代码：

<form action="" method="post" name="message" class="contact-message" onsubmit="return verifyForm()" onreset="return confirm('真的要重置吗？')">
    <div class="name clearfix">
        <label for="name">您的姓名：</label>
        <input type="text" id="name" id="name" placeholder="姓名" />
    </div>
    <div class="phone clearfix">
        <label for="phone">联系电话：</label>
        <input type="text" name="phone" id="phone" placeholder="请输入有效的电话" />
    </div>
    <div class="address clearfix">
        <label for="address">联系地址：</label>
        <input type="text" name="address" id="address" placeholder="请输入您的地址" />
    </div>
    <div class="content clearfix">
        <label for="content">留言内容：</label>
        <textarea name="content" id="content" placeholder="在这里输入你想说的话！"></textarea>
    </div>
    <div class="submit-and-reset clearfix">
        <button class="submit" name="submit" id="submit" title="提交">提交</button>
        <button class="reset" name="reset" id="reset" title="重置">重置</button>
    </div>
</form>

在 IE9 模式下：

其它浏览器和 IE10+ 中 placeholder 属性支持：

 

二、CSS 部分

1. 问题：不同浏览器对于 HTML 元素的外边距和内填充设置的默认值不同

别人的做法： *{ margin: 0; padding: 0; }

这种做法的不足： *(通配符) 表示所有标签，会对 html, head, link, title 这些没有关系的标签也设置外边距和内填充。导致浏览器执行效率低。

事实上不是所有标签都需要设置外边距和内容填充的，如 div, span。body, p, h1-h6 这些标签不需要设置内填充。

我通常会在 CSS 中写上以下样式：

/* 设置所有浏览器中外边距不为零的元素的外边距为零 */
body, h1, h2, h3, h4, h5, h6, p, hr, blockquote, pre, textarea, fieldset, figure, ul, ol, dl, dd, menu { margin: 0; }

/* 设置所有浏览器中内填充不为零的元素的内填充为零 */
input, textarea, button, select, option, fieldset, legend, ul, ol, menu, th, td { padding: 0; }

我这样做的好处：这是按需设置，既没有多余也没有遗漏，可以提高浏览器的执行效率，还能做到一劳永逸。

normalize.css 中有很多值得我们学习的初始化样式，这里很多样式都是为达到浏览器变现一致而设置的初始化。

2. 问题：纠正在 Safari 浏览器中的轮廓样式（设置轮廓的偏移）

input[type="search"] { outline-offset: -2px; }

3. 问题：在 IE 10 及之前的浏览器中版本中，单选按钮和复选框的样式不同

改变盒模型的默认规则，即将内填充和边框也算在宽高之内：

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

4. 问题：firefox 浏览器中 button 元素点击时会出现虚线边框

将聚焦状态下的轮廓设置为零：

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
input:focus,
button:focus,
textarea:focus { outline: none; }

5. 问题：在 IE 10 及更早的浏览器中当图片处于链接内部时图片有边框

这时移除图片的边框：

img { border-style: none; }

6. 问题：在 IE 10 中链接被激活后有灰色背景

移除链接被激活后的灰色背景：

a {
  background-color: transparent;
}

其他的，诸如 IE6 下的双倍边距问题，由于这是太老的浏览器了，不在讨论。前端的兼容性问题很多，但我们不应该仅仅回顾过往，要向前看，学习更多的新技术，总结更多的新特性这样才能进步。

 

三、JavaScript 部分

1. 问题：在 IE8 及更低版本的 IE 浏览器中 DOM 对象获取

不能通过 getElementsByClassName() 来获取。

可选择通过 getElementById() 或 getElementsTagName() 来获取。

2. 问题：IE8 及更早的版本不支持 innerWidth 来获取视口的宽度

在 IE8 及更早的浏览器之前不支持 window 对象的 innerWidth 和 innerHeight 这两个属性，用来获取浏览器视口的宽度和高度。

可使用通用的方法(涵盖所有浏览器)

var viewportHeight = innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var viewportWidth = innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

3. 问题：判断浏览器窗口滚动条的位置

在 IE8 及更早的浏览器之前不支持 window 对象的 pageXOffset 和 pageYOffset 这两个属性，用来获取滚动条的位置。

可使用通用的方法(涵盖所有浏览器)

var scrollOffsetTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollOffsetLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;

 

更新：(20170501)

4. 问题：addEventListener()

在 IE8 及更早的浏览器之前不支持 addEventListener() 方法为指定元素添加事件句柄。

该事件传递三个参数：

1. event 事件，必须。例如：click

2. function(){}，处理逻辑，必须。描述事件发生后处理的函数。

3. useCapture，使用捕获，可选。指定事件在冒泡或捕获阶段执行。默认值 false，即事件在冒泡阶段执行。

如果浏览器不支持 addEventListenter() 方法，可用 attachEvent() 方法替代：

if (document.addEventListener) {    //所有主流浏览器，除了 IE 8 及更早 IE版本
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) {   // IE 8 及更早 IE 版本
    document.attachEvent("onclick", myFunction);
}