2024年4月13日发(作者:)
DIV+CSS样式在IE6.0浏览器中常见问题的解决方法
div+css样式如今已经飞入了各大网站设计行业。对于新手来说
虽然已经把样式标签与样式代码熟记于心,但是编辑出来的网站与
预先设计还有一段差距。尤其是涉及到不同的浏览器时,在编写时
必须对各个浏览器的显示效果进行测试。由于ie6.0在出现时,css
样式还只是初级发展阶段,有很多功能与效果实现与后面的浏览器
有所不同。故在div+css样式编写时要着重解决相关问题。
1、解决ie6.0当中网页居中的问题
为了网页可以更加美观适应性强,一般网站在制作网页时,会让
整体网页居中对齐。以前在使用表格布局的时候,要让一个网站居
中对齐是非常简单的。只需要设置表格居中对齐就可以实现效果。
使用div+css样式其实原理是类似的,只是方法不同。比如:
#top{width:900;margin:0 auto;}
网站制作完成后,在各种不同浏览器当中使用,会发现ie6.0依
然是左对齐,无法实现居中对齐。在这句代码中是利用auto来现
实居中对齐的,意思是左边与右边宽度随意。在ie7.0及其以后的
版本当中,会对左右宽度随意进行平均分配。也就是说如果你的网
页宽度为900像素,浏览器宽度为1100像素,那么浏览器会自动
算出两边宽度分别为150。这样就可以现实居中对齐的效果。但是
在ie6.0当中对auto却无法解析。对于这个问题,可以借用
text-align来解决。对上述代码修改后如下:
#top{width:900;margin:0 auto;text-align:center;}
2、使用float浮动容器后ie6.0不适应问题
为了方便div+css样式代码可以适用于各种浏览器,一般在代码
编写时会使用float浮动容器。比如:
# left {float:left;width:240;}
设置完成后,在ie7.0与火狐等浏览器中两个页面展示出来的效
果基本上相差不大。但在ie6.0中使用浮动容器后会在右侧多出2-3
像素左右的高度。
如果把这段代码稍加修改:
# left {float:left;width:240;height:300}
设置完成后发现右侧的空白高度不见了,而左侧则多少相应的高
度。这个问题是ie6.0本身程序的问题。在ie6.0时代css仅仅是
用来增加网页美观的代码。要解决这个问题可以考虑在float浮动
容器里加入_margin-right属性。修改方法如下:
# left {float:left;width:240; _margin-right:-3px;}
当然,如果要确保在ie6.0,ie7.0及火狐当中效果都保持一致,
可以采用下列代码
# left {float:left;width:240; }
*html # left { float:left;width:240;_margin-right:
-3px;}
*+html # left { float:left;width:240; }
上列代码中,*html为ie6.0独有的标签,而*+html又为ie7.0
独有的标签。这样就可以对三种不同内核的浏览器进行有针对性的
设置。对于出现其它浏览器不一致,需要单独设置的情况,这个方
法同样有效果。
3、解决ie6.0中双倍边距的问题
在写css样式代码时,经常会遇上明明只设置了10像素的大小,
结果在显示时却变成了20像素。这是怎么回事呢?如下面这段代
码:
# left{float:left;width:240;margin:0 0 0 10px;display:
inline;}
在显示时就会出现比较大的偏差。要先说明这个问题,首先要清
楚block与inline两个元素。在css样式中block是指块元素。
块元素的特点就是可控制性,无论是高度、宽度还是上下左右的边
距都是可控的。inline元素字面的意思是在一条线上的元素,也就
是专业上所说的内嵌元素,内嵌元素对整体的效果是不可控制的。
而多出的10像素就是不可控制的自动产生的边距。针对这个情况,
可以作下列更改
# left{float:left;width:240;margin:0 0 0 10px;display:
block;display:inline;}
在网页中与这种情况比较相似还有。比如,直接在标签当中使用
img。在底部会多出一点空白的位置。这种情况也可以加入代码
display:block来解决。
4、在ie6.0下运行不正堂的注释。
css注释有时候在ie7.0、火狐下运动正常,但到了ie6.0中确
所有的效果都无法显示出来。这主要是ie6.0对某些注释无法翻译。
所以建议在css当中的注释应该以下面方式写出来:
/*这里是某某注释内容*/
样式脚本的编写还有很多需要注意的地方。但只要大家注意细
节,每个人都会成为一个优秀的网站编辑员。


发布评论