CSS中常见的BUG调试

当前位置 : 首页 > 网页制作 > CSS > CSS中常见的BUG调试

CSS中常见的BUG调试

来源: 作者: 时间:2016-01-23 10:51
1、布局layout布局是windows提出的概念,用于控制元素的尺寸和定位。拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素只能依靠最近的祖先元素进行控制。通常在IE

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及其更高版本

b)适用于IE6

c)低于IE6

2)应用星号HTML hack

在IE6及其更低版本中,有一个匿名的根元素,包围着html元素,因此可以利用该匿名根元素来讲特定的规则应用在IE6及其更低版本的上,如

* { 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%;)




Tag:
网友评论

<