CSS中常见的BUG调试

1、布局——layout

布局是windows提出的概念，用于控制元素的尺寸和定位。

拥有布局的元素负责自身及其子元素的尺寸及定位，而没有布局的元素仅仅能依靠近期的祖先元素进行控制。

通常在IE6中出现的BUG。非常可能是由于布局的缘故而产生的，因而修复IE中BUG的时候，第一件事就是尝试通过规则迫使元素拥有布局来看是否能修复。

默认情况下拥有布局的元素包含：body、html（标准模式下）、table、tr、td、img、hr、input、select、textarea、button、iframe、embed、object、applet、marquee

通过设置CSS属性也能够迫使元素拥有布局：

1）float：left或right

2）display：inline-block

3）width：不论什么值

4）height：不论什么值

5）zoom：不论什么值

6）writing-mode：tb-rl

在IE7中，下面属性也可迫使元素拥有布局：

1）overflow：hidden、scroll或auto

2）min-width：不论什么值

3）max-width：none之外的不论什么值

在IE6中由于布局而常出现的问题包含：

1）拥有布局的元素不会收缩：即是假设元素设定了尺寸，而元素内容超过元素尺寸时，通常是内容溢出到元素外，而IE6中是将元素进行扩展以适应内容。

2）布局元素对浮动进行自己主动清理：常见的一个样例是文字环绕图片，假设文字段落拥有布局，则文字不再环绕图片。

3）相对定位的元素没有布局

4）在拥有布局的元素之间外边距不会叠加

5）在没有布局的块级链接上，单击区域仅仅覆盖文本

6）在滚动中。列表项上的背景图片间歇性的显示和消失

2、hack和过滤器

1）IE条件凝视

a）适用于IE5及其更高版本号

<!-- [if IE]

<link rel="stylesheet" type="text/css" href="ie.css" />

-->

b）适用于IE6

<!-- [if IE 6]

<link rel="stylesheet" type="text/css" href="ie.css" />

-->

c）低于IE6

<!-- [if lt IE 6]

<link rel="stylesheet" type="text/css" href="ie.css" />

-->

2）应用星号HTML hack

在IE6及其更低版本号中，有一个匿名的根元素。包围着html元素。因此能够利用该匿名根元素来讲特定的规则应用在IE6及其更低版本号的浏览器上，如

* html { width: 1px; }

3）应用子选择器hack

利用子选择器不被IE老版本号所理解的特性。创建仅仅适用于现代浏览器的规则

html>body { background-image: url(bg.png); }

仅仅有支持子选择器的浏览器才干应用该规则

3、常见BUG及其修复方法

1）双外边距浮动bug——IE6及其更低版本号

bug：不论什么浮动元素的外边距加倍

修复：将元素的display属性设置为inline

2）3像素文本偏移bug——IE6及其更低版本号

bug：当一个非浮动元素与一个浮动元素相邻时。两个元素之间会自己主动加入一个3像素的间隙

修复：方法一：将非浮动元素设置为浮动；方法二：为非浮动元素设置规则：_zoom: 1; margin-left: value; _margin-left: value-3px; （注：zoom是触公布局，而下划线是针对IE7更低版本号的hack）

3）IE6的躲猫猫bug

bug：一个浮动元素跟着一个非浮动元素，之后再跟着一个清除浮动元素，全部元素都包括在一个有背景颜色或背景图片的父元素中。非浮动元素会被父元素覆盖，又一次载入才会出现。

修复：方法一：去掉父元素的背景颜色或图片；方法二：避免清除浮动元素与浮动元素接触；方法三：给父元素指定一个行高；方法四：将浮动元素和父元素的position属性设置为relative。

4）相对定位的元素中绝对定位错误——IE6及其更低版本号

bug：相对定位的父元素中包括绝对定位的子元素。子元素定位时的參照物不是父元素而是视口。（IE6中相对定位的元素没有拥有布局）

修复：迫使相对定位父元素拥有布局（设置width或height，如 _height: 1%;）

    <link rel="stylesheet" type="text/css" href="ie.css" />