此网站为郑州seo技术博客网站,欢迎加好友互相探讨!
当前位置:郑州SEO博客 > HTML技巧 > 正文

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

11-22 HTML技巧

最近在对“晶晶在线”大改版,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,则会引起子容器最后一个区块内文字溢出重复,实例如下:

 

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

 

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

版权保护: 本文由 郑州SEO博客 原创,转载请保留链接: http://www.zglblog.cn/html/113.html