任务13-浏览器兼容

---

2016/6/6

可以装个虚拟机，用于调试IE的兼容

---

1.如何调试 IE 浏览器

• IE浏览器7以上+自带的开发者工具，ie6可以用加border的方法
• 采用模拟器的方式去模不同版本下的IE浏览器，如ietester
• 通过安装虚拟机的方式，安装不同版本的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属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
  2.选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
  3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
  这段文字只是在IE浏览器下显示
  这段文字只是在IE6显示器生效
  这段文字只是在IE6以上（包括）版本IE浏览器显示
  这段文字在非IE浏览器下显示
  这段文字只是在非IE浏览器下显示
  参考资料

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

• hover IE6不支持，以上的IE只支持a标签的hover
• display:inline-block ie67不支持。
• max-height,max-width等一系列，IE6不支持
• padding,margin在不同浏览器默认样式有差异
• 在ie6下块元素有浮动和横向margin值，横向的margin值会被放大成2倍，解决方法：display:inline
• 在ie6下父级有边框的时候，子元素的margin值消失，解决方法：触发haslayout

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

看法：对于兼容有有的放矢，分清主次，针对主流浏览器去开发，同时要兼顾用户需求，遇到一个问题解决一个，先完成基本功能和样式的实现，再完善细节。
优雅降级：在前面的开发中，先不用考虑一些低的版本的浏览器，等开发完成之后慢慢地去做一个适应，只要页面还正常，不乱，看着还可以就OK了，没必要去追求特别高的还原度。
渐进增强：先针对ie6去做开发，再对一些好的浏览器增加一些额外的一些效果，让它看起来更好看一些。

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

• reset.css:是用于去除浏览器预先给标签设置的默认样式。
• normalize.css:normalize.css是reset.css的改良版，他是在reset的基础上进行改良避免误伤，保留了一些有价值的默认样式，还增加了其他功能，也没有reset.css 的一些缺点。
• 为什么使用nomalize.css?

1. Normalize.css 保护了有价值的默认值,这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.css 修复了浏览器的bug
3. Normalize.css 不会让你的调试工具变的杂乱
4. Normalize.css 是模块化的
5. Normalize.css 拥有详细的文档
   参考资料

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

• IE盒模型：宽度=内容宽度+padding+边框。
• 标准盒模型：宽度=内容宽度。
  *要使ie6 7 8 使用标准盒模型：
  (1)可以在开头添加来使用标准盒模型。
  (2)box-sizing:border-box 使元素按照ie盒模型计算，宽度=border+padding+内容宽度。

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

• IE6 inline-block、max-width完全失效
• IE7 inline-block完全失效 max-width 仅起一定作用
• IE8 两者都能正常使用
  老师，还没有装虚拟机~