浏览器的兼容与CSS技巧

一、如何调试 IE 浏览器
1、IE7以上版本的浏览器自带开发者工具，可以直接设置进行调试。

ie兼容.jpg

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版本下，不加的样式，即为怪异模式，则盒模型元素设置的width和height值为元素的占据位置，包括元素的大小，内边距，边框，外边距。

标准盒模型在ie6/ie7/ie8版本下，或者更高版本或者谷歌浏览器，加上即为标准的W3C盒模型，即盒模型元素设置的width和height只仅仅是元素的大小，元素所占的位置要加上margin,border,padding。
在IE6,7，8版本下在html代码的头部加入，即可使用标准盒模型。
box-sizing:border-box为元素设置了宽和高，即使盒子设定为IE盒模型，不是标准盒模型，设置的宽高包括元素自身的大小，padding,border,margin

box-sizing的使用