逆战班！IE6常见CSS解析Bug及hack

浏览器内核

浏览器内核可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

• 渲染引擎

  渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。

• JS引擎

  JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

主流浏览器内核

(1)Trident内核，由于被微软采用，并得益于微软操作系统的普及，以前几乎一统天下，所以又称为“IE内核”，主要浏览器有IE系列浏览器；

(2)Gecko内核，因为被Mozilla FireFox浏览器采用并得到开发者的进一步丰富，又被称为“Firefox内核”；

(3)WebKit内核，是Safari浏览器使用的内核，由Apple研发。 Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。

(4)Blink内核，由Google和Opera Software共同开发的浏览器内核，现在Chrome（28及往后版本）、Opera（15及往后版本）都将Webkit内核换成了Blink内核。

浏览器兼容

CSS Bug、CSS Hack和Filter

CSS Bug：CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

CSS Hack：CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

IE6常见CSS解析Bug及hack

图片间隙

描述：在元素中直接插入图片时，图片下方会产生约3像素的间隙(该bug出现在IE6及更低版本中)

hack1:将<img>转为块状元素，给<img>添加声明：display:block

hack2:将<img>设置vertical-align:top/middle/bottom;只要不为baseline

双倍浮向（双倍边距）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示

hack:给浮动元素添加声明：display:inline;

  <div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
  </div>

    .father {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .son1, .son2 {
      width: 50px;
      height: 50px;
      background-color: pink;
      float: left;
      margin-left: 50px;
    }

默认高度（IE6）

描述：在IE6及以下版本中，部分块元素拥有默认高度（低于16px高度）

hack1:给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

<div></div>

    div {
      height: 5px;
      background-color: red;
    }

百分比bug

描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。

hack:给右面的浮动元素添加声明：

​ clear:right 清除右浮动

​ clear:left 清除左浮动

​ clear:both 清除两边的浮动

  <div class="left"></div>
  <div class="right"></div>

    div {
      float: right;
      width: 50%;
      height: 300px;
    }

    .left {
      float: left;
      background-color: orange;
    }

    .right {
      background-color: pink;
      /* 两个都左浮动时，需要给右边的盒子添加clear:right */
      /* clear: right; */
      /* 当两个都右浮动时，需要给右边的盒子添加clear:left; */
      /* clear: left; */
      /* 当前面的盒子左浮动，右边的盒子有浮动时， 需要给右边的盒子添加clear:both;*/
      clear: both;
    }

表单元素高度及对齐方式不一致(IE,MOZ,C,O,S)

描述：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;或vertical-align:top;

去掉表单控件的边框时用border:0; border：none;不能兼容ie7以下浏览器。

按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致

hack1:：统一大小，用a标签模拟

hack2：在input上写按钮的样式，一定要把input的边框去掉。

hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

透明

1.opacity:0~1;IE8以上的浏览器

2.filter:alpha(opacity=1~100); IE9及IE9以下的浏览器

列表阶梯BUG（IE6及更低版本的浏览器中）

bug1:在给li标签的子元素中使用了float:left;父元素中没有设置浮动属性，li阶梯状效果。
hack:给父元素设置浮动便能解决此问题

  <ul>
    <li><a href="#">hello</a></li>
    <li><a href="#">hello</a></li>
    <li><a href="#">hello</a></li>
  </ul>

    li a {
      display: block;
      float: left;
      height: 50px;
      background-color: pink;
    }

bug2:当给lI里的A转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及更低的版本浏览器里会出现垂直显示。
hack:给a也设置左浮动便可解决。

  <ul>
    <li><a href="#">hello</a></li>
    <li><a href="#">hello</a></li>
    <li><a href="#">hello</a></li>
  </ul>

    li {
      float: left;
    }
    li a {
      display: block;
      height: 50px;
      background-color: pink;
    }

鼠标指针bug

描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

拓展：鼠标指针

crosshair(十字架)

pointer(手形)

move(移动)

e-resize(左右方向)

ne-resize（向右及向上移动）

nw-resize(向上及向左移动)

n-resize(向上移动)

se-resize(向下及向右)

sw-resize(向下及向左)

s-resize（向下移动）

w-resize（向左移动）

text(文本)

wait(等待状态)

help(帮助)