任务13-浏览器兼容

• 如何调试 IE 浏览器
  答：

  1. IE8及其以上版本中按F12进入开发者调试
  2. border: 1px solid red; 或outline: 1px solid red;（outline的好处是不占宽度，但有些IE6/7不支持）
  3. 在浏览器地址栏输入javascript:alert(document.get…)进行调试。

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

  • css hack:目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
  • html中写hack:添加条件注释。（IE10开始不支持cc注释了）
  • css 中写hack的方式：属性加前缀。
  • 下划线：如.selector { _color: red\9; } ,IE6能识别，IE7不能识别；
  • 星号：如 .selector { *color: red\9; },IE6和IE7都能识别；
  • \9：如.selector { color: red\9; } ,IE6/7/8都能识别；

• 列举几种 浏览器兼容问题
  答：
  1. 伪类:hover,ie6及以下版本只支持在a元素上有效果
  2. IE8以下版本的浏览器不支持min-width和max-width属性；解决方法：直接写死。
  3. display:inline-block,在ie7以下的版本不支持。

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

• 看法：应该根据项目数据调研，根据市场数据来定为，决定兼容程度。各个浏览器渲染标准不一。

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

• 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

• 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

  参考

• reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
  答：
  reset.css:给所有的样式都添加个默认样式，让所有默认样式都保持一致。
  normallize.css:保留大部分默认样式，移除一些基本不会用到的默认样式，修复各浏览器bug，让样式跨浏览器保持一致。
  为什么推荐使用nomalize.css?

  1. Normalize.css 保护了有价值的默认值。
  2. Normalize.css 修复了浏览器的bug。

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

  

  Paste_Image.png

Paste_Image.png

区别：IE 盒子模型的 content 部分包含了 border 和 pading。
IE7、8添加使用标准盒模型。
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
box-sizing:border-box作用：通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（显示为IE盒模型）

操作

• 安装xp虚拟机

Paste_Image.png

• 在 IE 7、8 中展示 盒模型、inline-block、max-width的区别？
  IE7 在声明DOCTYPE下的盒模型是标准盒模型，inline-block无效，max-width支持。
  IE8 在声明DOCTYPE下的盒模型是标准盒模型，inline-block max-width支持。

  
  
  

  Paste_Image.png
  
  

  IE7 没有声明DOCTYPE下的盒模型是IE盒模型，inline-block和max-width属性都不支持。
  IE8 没有声明DOCTYPE下的盒模型是IE盒模型，inline-block和max-width属性都不支持。

  
  
  

  Paste_Image.png