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生效,对写在判断语句里面的所有代码都会生效
<!-[if IE]>这段文字只是在IE浏览器下显示<![endif]->
<!-[if IE6]>这段文字只是在IE6显示器生效<![endif]->
<!-[if get IE6]>这段文字只是在IE6以上(包括)版本IE浏览器显示<![endif]->
<!-[if !IE8]>这段文字在非IE浏览器下显示<![endif]>
<!-[if ! IE]>这段文字只是在非IE浏览器下显示<![endif]>
参考资料
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?
- Normalize.css 保护了有价值的默认值,这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
- Normalize.css 修复了浏览器的bug
- Normalize.css 不会让你的调试工具变的杂乱
- Normalize.css 是模块化的
- Normalize.css 拥有详细的文档
参考资料
6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
- IE盒模型:宽度=内容宽度+padding+边框。
- 标准盒模型:宽度=内容宽度。
*要使ie6 7 8 使用标准盒模型:
(1)可以在开头添加<!doctype html>来使用标准盒模型。
(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 两者都能正常使用
老师,还没有装虚拟机~