在 IE 浏览器上进行调试

  • 在高版本的IE浏览器如IE8以上，有开发者工具，按F12调出，可以选择不同的浏览器版本进行调试（除了IE6，IE6可以通过设置border或使用javascript来测试）。

CSS hack的含义及在 CSS 中 ie6、ie7的使用

  • CSS hack是CSS使用中的一些奇怪的做法(与现行的标准用法不同，早期的浏览器如IE6出来时并没有统一的渲染标准)，主要是针对低版本的IE浏览器的兼容性来使用的。
  • 在HTML中hack的写法一般有三种
    ①属性前缀：直接在CSS选择器内部的属性前加仅低版本IE能识别的符号* _等；IE6能识别* _,例如*display：inline；而IE7能识别*但不能识别_。
    ②选择器前缀：在CSS选择器前加仅低版本IE能识别的符号；IE6能识别*，如*p{}；而IE7能识别*+，如*+p{}
    ③条件注释:针对一大段的CSS hack可以用<!--[if IE]>请书写针对IE浏览器的内容<[!end if]-->来做兼容，if IE可以改成其他条件，如if IE6等

常见浏览器兼容问题

  • 不支持部分标签或属性：例如IE6不支持display:inline-block,因为其内部没有关于此属性的定义和解析方式，这个时候我们就只能退而求其次使用display:inline来保证至少排版不要差异太大，当然也可以用其他方式如浮动来达成类似的效果，同样的例子还有min-height等.
  • 不同浏览器的默认设置差异：例如低版本的IE盒模型与标准盒模型的差异（下面问题会提到）；又或者默认的margin和padding差异，所以一般在css来头会有一个*通配符来修改默认的的margin和padding为0。

对兼容、多浏览器覆盖的看法及渐进增强和优雅降级的理解

  • 兼容和多浏览器覆盖是历史遗留问题，是在浏览器发展和W3C标准的建立中逐渐产生的，我认为开发人员需要抓住主要需求，针对主浏览器做开发，最后再去做兼容和多浏览器覆盖，要分清主次，明白锦上添花的含义。最终前端开发人员理想的状况是不需要兼容；针对前端入门的新手我认为重点在学习其他重点知识，对兼容是要去理解，也要知道如果碰到此问题要如何去搜索寻找解决方法，保持有意识也懂方法的前提下先去补充其他知识。
  • 渐进增强、优雅降级的主要思想是一样的，就是先指针对需求，适配1~2款浏览器去做主开发。如果是先针对现代浏览器的话，就可以优雅降级，不追求画面多炫功能多强大，针对低版本如IE7等做些兼容能实现基础功能即可；而如果一开始是部分政府项目，是针对IE6、7等低版本浏览器做的开发的话，就可以渐进增强，针对现代浏览器修改部分CSS去实现一些相对较先进方便的功能把页面做得更漂亮一点。

reset.css和normalize.css的作用与区别

  • reset.css是用于去除浏览器预先给标签设置的默认样式，如h标题的加粗和margin、li前面的小圆点等，有时候我们并不需要这些默认设置，就可以在CSS开头进行CSS重置，就是reset.css。
  • normalize.css是reset.css的改良版，他是在reset的基础上进行改良避免误伤，保留了一些有价值的默认样式，还增加了其他功能，也没有reset.css的一些缺点。
  • 相比与reset.css，normalize.css有以下几个优点：①它保留了部分有价值的默认样式，而且努力使不同浏览器的默认值保持一致尽量让表现接近现代标准；
    ②它修复部分浏览器的问题和bug（目前我还不大理解）；
    ③它没有reset.css的长串继承链，调试的时候不会显得很乱；
    ④它是模块化的，你可以清楚地知道哪些元素设置了什么值，同时你可以去掉某些你不常用或你不想要的部分；
    ⑤它有详细的代码和注释文档，你可以自己测试，同时也能让你了解到浏览器默认是怎么渲染元素的。

IE盒模型和标准盒模型的区别，怎样使 IE678使用标准盒模型?box-sizing:border-box的作用？

  • 盒模型，最中心是内容,往外是paddin内边距，再来是border边框,最后是margin外边距；IE盒模型和标准盒模型构造一样，区别在于当你指定了一个块级元素的width值后，在标准盒模型中代表内容宽度，而同一个width值在IE盒模型中却是内容宽度+内边距+边框，引用一张图作说明：
    盒模型
  • 可以使用<!doctype html>声明来使 IE678使用标准模式的标准盒模型。
  • box-sizing:border-box使用后，为元素指定的宽度和高度将包含其内边距和边框，后续如果有设置内边距和边框的话就会压缩内容宽度了，想当于采用了怪异IE盒模型。

在 ie 6, 7, 8中盒模型的展示

  • IE6的测试如下，没有doc申明，IE盒子，盒子偏小，不支持inline-block、不支持max-width!
    IE6未申明
  • 我们把doc申明添加进去，并在IE6做测试，盒子变回标准盒模型，但是inline-block和max-width依然没有效果！
    IE6有申明
  • IE8测试如下，没有doc申明，IE盒子，盒子偏小，未申明doc不支持inline-block、未申明也不支持max-width!
    IE8未申明
  • 我们把doc申明添加进去，并在IE8做测试，盒子变回标准盒模型，也支持inline-block和max-width！
    IE8有申明
  • chrome浏览器效果如下，标准盒子，支持inline-block、支持max-width！
    chrome测试