任务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：<!–[if IE]><!–您的代码–><![endif]–>，针对IE7以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>，这类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. <!DOCTYPE HTML>声明。
在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最前面添加<!DOCTYPE html>声明。
3.sizing:border-box作用：
- 使盒模型设定成IE盒模型的方式来计算宽度。
Paste_Image.png
1.实操安装虚拟机
Paste_Image.png
2.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别。
- 展示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
*{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;
}
</style>
</head>
<body>
<div class="box-mode"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="max-width"></div>
</body>
</html>
chrome V52：
Paste_Image.png
IE6：
Paste_Image.png
IE7：
Paste_Image.png
IE8：
Paste_Image.png
总结：
- 盒模型因为<!DOCTYPE html>声明的缘故所以W3C标准盒模型渲染，三张图无差异。
- inline-block：从上图看出IE6\7不支持，IE8正常显示。
- max-width：从上图看出IE6不支持，IE7/8支持。
本文版权归多彩和饥人谷所有，转载请注明来源！！！
