关于兼容那点事

1、如何调试 IE 浏览器？

• 使用高版本IE控制台，使用开发者工具，选择低版本IE浏览器。（IE7以上）
• 安装虚拟机，在虚拟机中安装IE 浏览器进行调试。
• IE6可以使用tester进行调试。
  2、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
• 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
• 对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
• 1、CSS hack方式一：IE条件注释法

只在IE下生效


只在IE6下生效


只在IE6以上版本生效


只在IE8上不生效


非IE浏览器生效

2、CSS hack方式二：CSS属性前缀法

-“-″减号是IE6专有的hack
-“\9″ IE6/IE7/IE8/IE9/IE10都生效
-“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
-“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

3、CSS hack方式三：选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

参考
3、列举几种 浏览器兼容问题？

• 不同浏览器的标签默认的margin和padding不同。解决方法：*{margin:0;padding:0;}
• 图片默认有间距。解决办法：使用float属性为img布局
• display:inline-block;IE6 7 不兼容。解决方法：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
  4、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
• 兼容、多浏览器覆盖，针对一个项目来说，如果考虑太多浏览器的兼容，是需要花费时间和精力来更新的，如果只有5%的人在用一种浏览器，就不需要兼容，例如淘宝已经不兼容IE6，因为没有很多人在用。所以想达到多浏览器覆盖是不可能的。
• 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
• 优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
  参考
  5、reset.css和normalize.css分别是做什么的？为什么推荐使用 nomalize.css?
• reset css的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性；
• normalize.css的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
• 1保护有用的浏览器默认样式而不是完全去掉它们
  2一般化的样式：为大部分HTML元素提供
  3修复浏览器自身的bug并保证各浏览器的一致性
  4优化CSS可用性：用一些小技巧
  5解释代码：用注释和详细的文档来
  参考
  6、在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别?

  
  
  


  
盒模型
  

    

      
box1
      
box2
      
box3
    
  
  
你好
  
前端
  
max-width

IE8

0_1458445817178_8.png

IE7

0_1458445834174_7.png

IE5

0_1458445844470_5.png