最近在对“晶晶在线”大改版，UI布局彻底重写，将css代码量压缩并增加元素class统一样式，解决了原先css文件超过15kb的窘境；同时还原了对ie6.0的支持；所以在进行ie、ff、cm以及op、sf浏览器统一布局兼容性测试的时候还是发现了ie6.0的许多兼容性问题；以下就这些问题进行简要的分析与我所提出的解决方案：

IE6.0文字溢出bug

该bug是ie6的经典bug，出现这种溢出bug的情况有三种：

1.具有hidden属性的input标签不包含在指定容器内，比如以下代码的情况就可能出现某些文字溢出：

<div style="width:400px">   

    <div style="float:left"></div>   

    <input type="hidden" value="hidden" />   

    <div style="display:none;">hidden</div>   

    <div style="float:left;width:400px">IE6文字溢出的BUG</div> 

</div>

解决方案很简单，将这个具有hidden属性的input标签用个无float属性的div或者filedset包含即可；代码入下：

<div style="width:400px">   

    <div style="float:left"></div>   

    <div><input type="hidden" value="hidden" /></div>   

    <div style="float:left;width:400px">IE6文字溢出的BUG</div> 

</div>

2.html页面在特定位置写下了诸如<!--这个是html注释-->形式的w3c标准注释，则会引起该处文字溢出；这种特定情况为在两个具有浮动float属性的blcok区块之间写入了该种类似的注释，代码如下：

<div style="width:400px">   

    <div style="float:left"></div><!--这里写的是html注释-->   

解决方案很简单，去掉注释（但去掉注释是编程所最忌讳的~），还有一种解决方案，就是将注释写在两个非float标签之间或者在某个父容器之前，或者还有一种解决方案，就是采用非w3c标准的注释方式，形如：

<!--[if !IE]>这里是注释内容[endif]-->

3.“3像素bug”造成文字溢出

该种情况是父容器是个float属性的block区块，而该区块内还包含了具有block（内联样式的标签如span是可以通过display：block；来使其成为区块的）属性的多个区块；而且子容器区块的width长度相加大于父容器width或者父容器width长度减去所有子容器width之和后小于3px，则会引起子容器最后一个区块内文字溢出重复，实例如下：

其中那多余的一个“品”字即为该“3像素bug“造成，该父容器为一个li标签，其内四个词组均为span标签具有block属性，该li标签的width值为180px，而四个span标签width之和为178，刚好引起这个“3像素bug”的文字溢出；最后我的解决方案只好是牺牲两层文字对齐的美观而改动span标签的每个width值了；改动后效果如图：

改动后上下两层就无法在“名博”与“产品”间对齐了；但文字溢出bug解决了，这个只能是个折中方案，如果要对齐文字，则还需要深度计算；

那么为何文字溢出bug会出现重复文字？BUG虽然的的确确的存在，但是为什么会出现这样的BUG依然没有统一的定论。不同的高手也是各执一词，谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来，但是现在仍然没有官方的说法。

height行高溢出指定大小造成布局混乱的问题

采用csssprite技术对页面进行布局时的height行高溢出问题：

该问题一直是萦绕我的一个大问题，这个问题实际上就是不同浏览器对css标注所进行的机器解析不一致造成的；bug表现如图所示：

这个是csssprite技术产生的圆角边框，兼容所有浏览器，但是就是在ie6.0的情况下，底边的div明明定的是3px的height行高，一旦在ie6.0下查看就会出现行高大于3px而且还跑出png图中其他布局区块的位置；

这个问题也就是因为csssprite技术中所强调的将所有ico形式的小图片集成到一种png或者gif图中造成的height位置比实际定制的height要大而引起的；这个问题的解决方案非常简单，将这个具有3px行高的布局容器带上overflow：hidden；就可。机理就不再赘述了~

晶晶在线站长晶晶原创技术文章，转载请注明来源以及该文章链接地址~！