在 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
可以改成其他条件,如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!
-
我们把doc申明添加进去,并在IE6做测试,盒子变回标准盒模型,但是inline-block和max-width依然没有效果!
-
IE8测试如下,没有doc申明,IE盒子,盒子偏小,未申明doc不支持inline-block、未申明也不支持max-width!
-
我们把doc申明添加进去,并在IE8做测试,盒子变回标准盒模型,也支持inline-block和max-width!
-
chrome浏览器效果如下,标准盒子,支持inline-block、支持max-width!