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当中的注释应该以下面方式写出来： /*这里是某某注释内容*/

样式脚本的编写还有很多需要注意的地方。但只要大家注意细节，每个人都会成为一个优秀的网站编辑员。