您的位置:晶晶的博客>前端>IE6.0文字溢出bug、行高height溢出问题总结以及解决方案

IE6.0文字溢出bug、行高height溢出问题总结以及解决方案

最近在对“晶晶在线”大改版,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注释-->   

    <div style="float:left;width:400px">

        <div>IE6文字溢出的BUG</div>

    </div> 

</div>

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

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

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

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

3px文字溢出bug

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

3px文字溢出bug

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

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

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

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

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

height行高溢出bug

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

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

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

转载请注明本文标题和链接:《IE6.0文字溢出bug、行高height溢出问题总结以及解决方案

相关推荐

网友评论抢沙发

路人甲 表情
Ctrl+Enter快速提交