前端面试总结三

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

写这篇兼容性总结参照了 http://www.qdfuns.com/notes/21128/db10afdde2abe5f0b72d5945358987e3.htmlhttp://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);
}

 

posted @ 2017-02-20 20:10  艾前端  阅读(329)  评论(0编辑  收藏  举报