浮动引起的文本重影
在做项目开发时遇到了一个怪异现象“整段内容被重影”的问题,一般来说这类问题在IE6中表现的比较多,但这次出人意料的是IE7也殃及在内。在早前互联网上就有分享过使用HTML注释会引起类似的文字倒影问题,但此时的页面却是没有任何注释~,持续地测试分析问题变得越来越有趣了…
测试结果为当不适当地使用float:left/right; width:100%; display:none;CSS属性值及相应的HTML结构做组合,会引发在IE中的七种怪异问题,此问题在中文及英文字体均会出现。详细如下例:
阅读约定:
以下是引用片段: cont1是指:<p class=”cont1″>ABCDEFG</p> cont2是指:<p class=”cont2″>1234567</p> |
一、相等长度的文本消失
在IE6中,cont1与cont2字符长度相同时,文本会消失,且容易引起浏览器IE6崩溃。
但改变浏览器窗口尺寸时内容会再次显示。
注意:测试了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
DEMO:http://blog.gulu77.com/demo/200908/float/a1.html
二、当浏览器宽度少于内容宽度文本会消失
在IE6中,当浏览器宽度少于内容宽度文本会消失,且容易引起浏览器崩溃。
但改变浏览器窗口尺寸时内容会再次显示。
注意:测试了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
DEMO:http://blog.gulu77.com/demo/200908/float/a2.html
三、相等长度文本重影
在IE6中,cont2比cont1多出一个字符时,内容会被重映为相等长度的文本,且容易引起浏览器IE6崩溃。
DEMO:http://blog.gulu77.com/demo/200908/float/b1.html
四、当浏览器宽度少于内容宽度文本会重影
在IE6中,cont2比cont1多出一个字符时,且浏览器宽度拉伸至小于内容宽度文本会完全重影。
此问题与第三个对比在于一个不需要拉伸,一个需要拉伸。
DEMO:http://blog.gulu77.com/demo/200908/float/b2.html
五、文本的倒序重影
在IE6中,cont2比cont1多出两个字符或以上时文本会被倒序重影,且容易引起浏览器IE6崩溃。
规律为:重影字符数 = cont1的字符数 + 1个字符数
DEMO:http://blog.gulu77.com/demo/200908/float/c1.html
六、内联元素引起的文本重影
在IE6中,浮动元素之间有不含内容的内联元素的标签(指内联标签或CSS模拟的内联标签)后会引起文本重影。
规律为:重影字符数 = 内联元素数量 * 2字符数 - 1个字符数
DEMO:http://blog.gulu77.com/demo/200908/float/d1.html
七、内联元素引起的IE6/7文本重影与消失
与第六的《内联元素引起的文本重影》类似,但在cont2后面添加了一个内联元素后会导致IE7也出现重影BUG。而内联元素相加超出cont2字符数时,IE7表现正常,IE6则表现为消失。
规律为:重影字符数 = 数量 * 2字符数 - 1个字符数
DEMO:http://blog.gulu77.com/demo/200908/float/e1.html
而内联元素相加超出cont2字符数时,IE7表现正常,IE6则表现为消失。
注意:测试了IE Collection的:6.0.2900.5512.xpsp_sp2_qfe.090206-1239IC版本出现此问题
规律为:重影字符数 = 数量 * 2字符数 - 1个字符数
DEMO:http://blog.gulu77.com/demo/200908/float/e2.html
总结
围绕着float加width列出的种种问题,下面列举一些解决的方法,也期待分享你的解决方案,在此不胜感谢:
避免float:left/right;与width:100%;同时使用。对于例子中的display:none;可以使用visibility:hidden;代替。尽量减少使用float进行布局,从目前的经验看来float是种种奇怪问题的根源所在。建议继续学习:
- OverFlow -- 创建BFC,清除浮动 (阅读:2993)
- IE6浮动引起的一些BUG (阅读:2220)
- IE双倍浮动边界Bug (阅读:2146)
- CSS 简易浮动清除方法讨论 (阅读:1994)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Gulu77 来源: Gulu77
- 标签: 浮动 重影
- 发布时间:2009-11-08 23:10:45
- [41] 界面设计速成
- [36] Oracle MTS模式下 进程地址与会话信
- [33] IOS安全–浅谈关于IOS加固的几种方法
- [33] 如何拿下简短的域名
- [32] 图书馆的世界纪录
- [32] 视觉调整-设计师 vs. 逻辑
- [32] 程序员技术练级攻略
- [31] 【社会化设计】自我(self)部分――欢迎区
- [31] android 开发入门
- [28] 读书笔记-壹百度:百度十年千倍的29条法则