ie13支持html5,任务13-浏览器兼容

1.如何调试 IE 浏览器

IE8以上有开发者工具(高版本的IE开发者工具兼容模式可以往下选择兼容不同版本)，F12打开，如下图：

Paste_Image.png

也可以使用border: 1px solid red; outline: 1px solid red来快速帮组定位问题所在。

IETester浏览器测试工具，可以模拟IE6.7.8.9渲染网页。注：搜索了一下都是2、3年前的文章了。可能不是很实用。

安装虚拟机(比较靠谱但是比较麻烦的方法。)

2.什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

注：搜索这个也是2、3年前的文章

因为早期浏览器渲染代码方式不同，浏览器厂商也不知一家，所以就出现了兼容问题。每个浏览器厂商都给自己设定了一个特别的符号，让它们的浏览器能认识这个符号后面的代码，而其他浏览器对这个符号无视，对它后面的代码也会忽略。CSS hack就是用来解决一些兼容问题的方式。

IE6、IE7 中写CSS和HTML的hack：

HTML中：

1.注释法:

IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：，针对IE7以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都 会生效。

CSS中:前缀法：

比如IE6能识别_和*，IE7能识别*，但不能识别_。

比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

/* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6、IE7 识别 */ +color:red; /* IE6、IE7 识别 */ *+color:red; /* IE6、IE7 识别 */ [color:red; /* IE6、IE7 识别 */ color:red\9; /* IE6、IE7、IE8、IE9 识别 */ color:red\0; /* IE8、IE9 识别*/ color:red\9\0; /* 仅IE9识别 */ color:red \0; /* 仅IE9识别 */ color:red!important; /* IE6 不识别!important*/

/* CSS选择符级Hack */ *html #demo { color:red;} /* 仅IE6 识别 */ *+html #demo { color:red;} /* 仅IE7 识别 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */ :root #demo { color:red\9; } : /* 仅IE9识别 */

/* IE条件注释Hack */

3.列举几种 浏览器兼容问题？

1. 声明。

在IE6下如果没有写DOCTYPE声明，浏览器将使用怪异模式渲染网页。

2.各厂商的默认margin和padding值不同。

ie:

Paste_Image.png

chrome:

Paste_Image.png

解决方法：*{margin:0;padding:0;}

3.inline-block；

在IE下只能让它变成inline元素，然后触发块元素的 layout，使它看起来像inline-block;

display: inline-block;*display: inline;zoom: 1;

4.横向双倍外间距：

当在IE6下浮动元素后，会出现横向双倍margin。

解决办法： 在float标签的样式控制中加入display：inline

4.针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？

兼容、多浏览器覆盖只是浏览器发展的一个过程，我们处在这个过程中，从浏览器的发展历史，早期的各厂商渲染方式不一到现在的w3c规范，浏览器的发展始终要规范化，这是趋势，也更有利于开发环境和用户体验。目前针对兼容，多浏览器覆盖是不可避免的，毕竟各厂商浏览器都有自己的用户群体，而网页是要给所有人看的。

渐进增强：

针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：

一开始就针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容。

5.reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?

reset.css:是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

normalize.css:它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。

normalize.css优势：

• 1. Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。 这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

• 2. Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。 关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

• 3. Normalize.css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链，如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

• 4. Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

• 5. Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。 这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用?

1. 回到之前的盒模型,如下图：

Paste_Image.png

可以看出：

IE盒模型：width=border+padding+content。

W3C盒模型:width=content.

2.IE678使用标准盒模型：

在html最前面添加声明。

3.sizing:border-box作用：

使盒模型设定成IE盒模型的方式来计算宽度。

Paste_Image.png

1.实操安装虚拟机

Paste_Image.png

2.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别。

展示代码：

Document

*{margin:0;padding:0;}

.box-mode{

border:1px solid pink;

height: 100px;

width: 100px;

background: #eee;

padding:20px;

margin:20px;

}

.inline-block{

border:1px solid pink;

height: 100px;

width: 100px;

background: #333;

display: inline-block;

}

.max-width{

border:1px solid;

max-width:100px;

height: 50px;

background: yellow;

}

chrome V52：

Paste_Image.png

IE6：

Paste_Image.png

IE7：

Paste_Image.png

IE8：

Paste_Image.png

总结：

盒模型因为声明的缘故所以W3C标准盒模型渲染，三张图无差异。

inline-block：从上图看出IE6\7不支持，IE8正常显示。

max-width：从上图看出IE6不支持，IE7/8支持。

本文版权归多彩和饥人谷所有，转载请注明来源！！！