任务13
1.如何调试 IE 浏览器？
答：
- 如果是IE7版本以上可以按F12调出开发者工具进行调试。
- 如果是IE6可以使用边框直接进行调试。
- 使用软件IEterser来进行不同的IE版本调试，然而这个软件不方便而且收费。
- 安装多个虚拟机分别运行IE不同的版本进行调试，推荐使用这个方便，稳定，免费。
2.什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
答：
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
- CSS hack一般有3种表现形式CSS内部hack、选择器hack、及HTML头部引用（if IE）hack。
- CSS内部hack:主要针对内部hack；比如IE6能识别下划线“”和“”，IE7能识别“”但不能识别下划线，而Firefox两个都不认识。
background:#ff0; /* for all browsers */
_background:#f00; /* for ie6*/
*background:#f0f; /* for ie6~7 */
background:#00f\9; /* for ie6~10 */
- 选择器hack：比如IE6能识别HTML.class{}，IE7能识别+HTML.class{}或者
*.first-child+html.class{}。等等
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
- HTML头部引用：针对所有IE：<![endif]-->这类hack不仅仅对CSS有效还对判断句里的所有代码都生效。
3.列举几种 浏览器兼容问题
答：
-
<display:inline-block>不兼容IE67所以需要在下添加*display:inline; *zoom:1;来使IE67兼容。 -
<min-height>在IE7以下不兼容，需要给其固定宽度。 -
Box-sizing在IE67不支持。
【CSS】最全的CSS浏览器兼容问题
4.针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
答：在考虑兼容的时候首先考虑面向的用户是什么，如果是政府银行的项目那就得好好考虑兼容IE67的事情，因为你做出来的东西主要是他们看。如果面对的大部分是年轻用户那甚至可以不考虑兼容IE67，当然还是要听从领导的建议，但也可以对领导不合理的要求可以提出自己的见解。
在写代码的时候也已查一下这个浏览器使用的人数，如果超过了5%那就有必要做下兼容，兼容并不是一定要分毫不差的在每个浏览器都很好的实现，对于一些老旧的浏览器，只要兼容到不是那么难看的程度就可以了，一些特效比如圆角都可以去掉，为了极少数的用户去花费极大的精力去兼容是不可取的。
渐进增强：是指先针对能在低版本浏览器上进行编写保证最基本的显示，然后再针对高版本的浏览器进行优化美化。
优雅降级：是指现针对高版本的浏览器进行编写，然后再对低版本的浏览器进行优化兼容处理。
5.reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
答：
- Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
- 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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。
这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。
- reset.css是通过重新定义标签样式，把浏览器的默认样式覆盖掉，以便保持个浏览器渲染的一致性,相对暴力。
- normalize.css是reset.css的替代方案，保留有用的浏览器默认样式，重置掉该重置的样式，同时进行一些bug的修复，相对平和。
有些时候重新定义一些标签样式是没必要需要的时候还得大费周折的给他加回去，所以推荐使用normalize.css。
6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？
答：IE盒模型的宽度是：
宽度（width）=边框（border）+内边距（padding）+内容宽度（content）
标准盒模型的宽度是：实际内容的宽度。
IE678下使用标准盒模型在文档声明里写上<doctype>即可。
这是一个CSS3属性<box-sizing:border-box>的作用是固定盒模型的宽度，使得padding无法将盒模型撑开，也是就使用IE盒模型。
操作：安装XP虚拟机。
QQ图片20160806201738.png
装了3个虚拟机分别安装IE678三个浏览器
测试代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任务13</title>
<style>
.box {
border: 20px solid #000;
padding: 20px;
margin: 20px;
width: 200px;
height: 200px;
background: red;
}
.box2{
display: inline-block;
}
p{
max-width:300px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2">hollo</div>
<div class="box2">world</div>
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本</p>
</body>
</html>
ie6结果如下
QQ图片20160807002734.png
可以看出IE6部分支持
Inline-block不支持max-width 但是可以使用标准模式进行渲染。IE7结果如下
QQ图片20160807003322.png
可以看出IE7支持
max-width但部分支持inline-block，也支持标准模式渲染，但是通过查资料发现inline-block在IE67支持行内元素IE8结果如下
QQ图片20160807003816.png
可以看出IE8全部都支持
本教程版权归本人和饥人谷所有
