任务13

一、问答

1.如何调试 IE 浏览器?

• IE7以上可以使用浏览器自带的开发者工具,按F12调出开发者工具进行调试，IE6可以使用加边框的方式进行调试；
• 可以使用模拟器模拟不同版本的IE浏览器，如IEtester或者Test IE、Edge自带模拟器等；
• 安装虚拟机，运行不同版本的IE来调试。；

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

• css hack是针对不同浏览器的一些bug,写的一些特别的非常规的样式;
• css的hack的写法:有三种表现形式;
  • css属性前缀法:例如IE6能识别下划线和星号; IE7能识别星号,但不能识别下划线;IE6-IE10都认识"\9",但firebox上述三种都不识别;
  • 选择器前缀法:例如IE6能识别html.class{},IE7能识别+html.class{}或者*:first-child+html.class{}
  • IE条件注释法:针对所有IE(IE10+已经不再支持条件注释);、针对IE6及以下版本;.这类hack不仅对css生效，对写在判断语句里面的所有代码都会生效;
• html的hack写法:
• 只在IE下生效

• 只在IE6下生效;

• 只在IE6以上版本生效

• 非IE浏览器生效

• 在 CSS 中 IE 7、IE 8的 hack 方式？
  • .selector { property: value !ie; } 小于或等于ie7使用.
  • .selector { property: value\9; } ie6~ie8都可以.

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

• IE 8 以下不兼容border-radius。
• 每种浏览器默认边距样式都不一样，一般会重置外边距与内边距为零。
• IE 6 不支持hover属性。
• opacity透明度在IE8以下不支持，解决方式filter:alpha(opacity=50).
• inline-block在IE6和IE7不支持，解决方式 {display:inline; zoom:1}

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

• 兼容问题：在开发网页的时候，由于各方面的原因，不可能做到所有的浏览器都兼容。所以我们要根据浏览器市场占有率，兼容主流、淘汰末流。兼容并不是一定要分毫不差的在每个浏览器都很好的实现，对于高级浏览器功能全开，提供最好的用户体验。对于低级浏览器页面展示效果可以降低标准，并建议提醒客户转至高级浏览器享受更好用户体验。

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

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

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

• reset.css是重置样式，把浏览器的默认样式覆盖掉，让整个浏览器保持渲染的一致性,它相对于暴力。

• normalize.css是reset.css的替代方案。它重置掉该重置的样式，保留有用的浏览器默认样式，同时进行一些bug的修复，它相对平和,这点是 reset.css 所缺乏的。

• 使用 nomalize.css的原因有以下几点:

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

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

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

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

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

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

• IE盒模型和标准盒模型的区别:
• IE盒模型:宽度（width）=边框（border）+内边距（padding）+内容宽度（content）;
• 标准盒模型:宽度（width）=内容宽度（content）
• 如何使IE7、8使用标准盒模型:
  • IE不添加doctype时（怪异模式）使用的是IE盒模型，要想使IE7、8使用标准盒模型,通过在HTML中设置声明Doctype即可.

• box-sizing:border-box的作用:

  
  
  

浏览效果如下:

综上所述的作用是固定盒子大小；任何padding和边框都在盒子内进行改变。计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。 即IE盒模型算法。

二、操作

1.virtualbox 安装 xp 虚拟机

• ie7虚拟机

• ie8虚拟机

2.在 IE 7、8 中展示 盒模型、inline-block、max-width的区别:

• 代码如下

  
  
  

• 盒模型

• IE7浏览效果如下:未声明doctype,使用的是ie盒模型

  
  
  

• IE7浏览效果如下:声明doctype,使用的是标准盒模型

  
  
  

• IE8浏览效果如下:未声明doctype,使用的是ie盒模型

  
  
  

• IE8浏览效果如下:声明doctype,使用的是标准盒模型

  
  
  

• inline-block

• IE7浏览效果如下:可以看出在IE7中不识别inline-block;
  

• IE8浏览效果如下:可以看出在IE8中识别inline-block;

  
  
  

• max-width(ie7、ie8都识别)

• IE7浏览效果如下:
  

  

• IE8浏览效果如下: