一、如何调试 IE 浏览器
1、IE7以上版本的浏览器自带开发者工具,可以直接设置进行调试。
2、用f2etest可以直接设置不同浏览器版本进行测试。
3、建议安装Xp的虚拟机,模拟不同版本的IE浏览器。
二、什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?
一般情况下,用自己的浏览器写代码进行设计时,可以完美展示,但是如果放在版本比较低的浏览器上,会有些效果运行不了,不能正常显示。让网页样式兼容不同的浏览器,使css代码兼容不同的浏览器,需用非一般的手段解决问题,用一个bug解决此bug,写css hak。
针对一些浏览器不兼容的bug, 用css hak实现兼容性。
方法:1、写在html里的条件注释。条件注释是如果是在IE6的浏览器下,会显示“那就展示这句话”如果不是在IE的浏览器下,会显示“那就展示这句话”一般为提升网页的可读性,会添加注释本身再网页客户端是不显示的,或者/这是注释/
2、写在css里的css hack,让网页兼容不同的浏览器,css hack的目的就是使css代码兼容不同的浏览器。一般页面上使用较多的IE6,IE7,IE6,7这三种。IE6的hack写法是_例如p{color:blue;_color:blue;}同时写上hack和正常内容;对于代码“_color:blue”IE6可以读取,但是IE7就不行了。IE6,7的hack是,例如p{min-height:100px;height:100px;}由于min-height不兼容6,7。li{display:inline-block;display:inline;}inline-block,不支持6,7,进行相应设置即可。
3、在IE6,7中的hack方式是属性前面加个,即p{display:inline;}则该属性再ie6和IE7下均有效
三、列举几种 浏览器兼容问题
1、不同浏览器的外补丁、内补丁默认不一样大
1、display:inline-block只支持IE8及以上版本,如果要使用,需设置.wrap{display:inline-block;display:inline;}
2、box-sizing:border-box只支持IE8及以上版本
3、background-size:只支持IE8以上版本
4、opacity支持IE8以上及部分IE8版本
四、针对兼容、多浏览器覆盖有什么看法?渐进增强和优雅降级是什么意思?
看法:1、根据项目针对的目标客户特点,进行浏览器兼容的设置;
2、一般需要兼容至要求最低版本,在项目开始前,确定最低支持的版本,设计兼容方案,比如目标客户一般使用IE7,IE8,IE9及以上,那么我们应该兼容IE7;
渐进增强和优雅降级都是由于低版本浏览器不支持CSS3,但是CSS3的效果比较好(比如圆角),所以再版本高的浏览器显示正常的,在低版本浏览器只保证一般显示,二者的区别是:
渐进增强:设计页面时针对低版本浏览器,再针对高版本浏览器进行改进设计,实现更加的效果。
优雅降级:开发页面的时候不用考虑兼容性,在完成之后,某些低版本浏览器兼容不了时,再对低版本浏览器进行设计实现兼容。
五、reset.css和normalize.css分别是做什么的?为什么推荐使用 nomalize.css
?
Normalize.css是保留浏览器的原来样式并且做到每个浏览显示一致。 CSS Reset(兼容ie6)相反把浏览器的默认样式都重置了,就算一般默认的h1-h6,如果设置CSS Reset,则字体为浏览器默认大小,字体。
推荐使用nomalize.css的原因:
1、Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多默认的浏览器样式。
2、Normalize.css 修复了浏览器的bug
3、使用Reset在浏览器调试工具中有较多的继承链,而 Normalize.css 会有目的地对目标元素设置样式,不会让调试工具变的杂乱。
4、Normalize.css 是模块化的
5、Normalize.css的代码基于详细而全面的跨浏览器研究与测试,拥有详细的代码说明。
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用
IE盒模型型是在ie6/ie7/ie8版本下,不加<!DOCTYPE html>的样式,即为怪异模式,则盒模型元素设置的width和height值为元素的占据位置,包括元素的大小,内边距,边框,外边距。
标准盒模型在ie6/ie7/ie8版本下,或者更高版本或者谷歌浏览器,加上<!DOCTYPE html>即为标准的W3C盒模型,即盒模型元素设置的width和height只仅仅是元素的大小,元素所占的位置要加上margin,border,padding。
在IE6,7,8版本下在html代码的头部加入<!DOCTYPE html>,即可使用标准盒模型。
box-sizing:border-box为元素设置了宽和高,即使盒子设定为IE盒模型,不是标准盒模型,设置的宽高包括元素自身的大小,padding,border,margin