“浏览器”那些事

前端离不开“浏览器”，要学好前端，我们就要学会调试IE浏览器，并且处理好浏览器兼容等有关浏览器的问题。

一、如何调试 IE 浏览器？

• IE浏览器7以上+自带的开发工具，ie6可以用加border的方法;
• 采用模拟器的方式去模拟不同版本下的IE浏览器，如ietester;
• 通过安装虚拟机的方式，安装不同版本的IE运行环境去达到调试IE浏览器的目的。

二、什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？
CSS Hack:不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的的兼容问题。而这个针对不同的浏览器写不同的CSS代码的过程。
在CSS和HTML中如何写hack:
CSS Hack大致有3种表现形式：CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack。

• 属性前缀法（即类内部Hack）
  <pre>
  Html:
  <div class="container">
  </div>
  CSS:
  .container{
  color:red;
  _color:red;/IE6识别/
  color:red;/IE6,IE7识别/
  color:red\9;/IE6-IE10识别*/
  }
  </pre>
• 选择器前缀法：
  <pre>
  body{
  }/只对IE6有效/
  +body{
  }/只对IE7生效/
  @media screen\9{...}/只对IE6/7生效/
  </pre>
• IE条件注释法：
  只在IE下生效
  <pre>

</pre>
只在IE6下生效
<pre>

</pre>
只在IE6以上版本生效
<pre>

</pre>
只在IE8上不生效
<pre>

</pre>
非IE浏览器生效
<pre>

</pre>
在CSS中ie6、ie7的hack方式：
IE6
选择器前缀法：
<pre>
body{
}/只对IE6生效/
</pre>
IE条件注释法：
<pre>

</pre>
IE7
选择器前缀法：
<pre>
+body{
}/只对IE7生效/
</pre>
IE条件注释法：
<pre>

</pre>

三、列举几种 浏览器兼容问题

• 不同浏览器的标签默认的外补丁和内补丁（margin和padding）不同；
• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大；
• 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE间距bug;
• 标签最低高度设置min-height不兼容；
• 透明度的兼容CSS设置

四、针对兼容、多浏览器覆盖有什么看法？渐进增强和优雅降级是什么意思？
对于兼容，有的放矢，分清主次，针对主流浏览器开发，同时兼顾用户需求，遇到一个问题解决一个，先完成基本功能和样式的实现，再根据需要和其他浏览器的用户份额来考虑是否完善兼容性。
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

五、reset.css和normalize.css分别是做什么的？为什么推荐使用 normalize.css?
reset.css的目的是将所有浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

normalize.css则尽量保留浏览器的默认样式，该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。

normalize.css的优势：
1.normalize.css保护了有价值的默认值，reset.css通过为几乎所有的元素添加默认样式，强行使得元素有相同的视觉效果，相比之下，Normalize.css保持了许多默认浏览器样式；这就意味着你不用再为所有公共的排版元素重新设置样式。
2.Normalize.css修复了浏览器的bug，它修复了常见的桌面端和移动端移动浏览器的bug，这往往超过了reset.css所能做到的范畴。

六、IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用？
IE盒模型下盒子的宽度=边框+padding+内容宽度（IE6,7,8怪异模式）
标准盒模型下盒子的宽度=内容宽度
通过添加doctype声明使IE678使用标准盒模型。
box-size:border-box;是CSS3新增属性，设置此属性之后，相当于以怪异模式解析。通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width）
如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
示例：

参考：
1.CSS hack方式
2. 史上最全的CSS hack方式一览
3.div+CSS浏览器兼容问题整理
4.Normalize.css和Reset CSS的区别
5.normalize.css与reset.css区别
6.关于css样式的重置：Reset.css和Normalize.css

版权归本人所有，若有转载，请注明来源。