当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网页注释在IE中产生文字溢出

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 网页注释在IE中产生文字溢出


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 92 ::
收藏到网摘: n/a

实验代码如下:

提示:您可以先修改部分代码再运行 1、在IE、FF中测试,只在IE出现文字溢出现象。
说明:注释造成文字溢出是IE的BUG。
2、去除<div style="float:left"></div> 中的“float:left;”,你会发现多出来的“猪”字不见了,页面正常显示。

提示:您可以先修改部分代码再运行 同样去除 <div style="float:right;width:400px">中的“float:right;”,多余的“猪”字也同样消失,页面正常显示。

提示:您可以先修改部分代码再运行 说明:注释造成文字溢出与区块的浮动有关。
3、将注释转移到<div style="float:left"></div>前面,多余的“猪”字消失,页面正常显示。

提示:您可以先修改部分代码再运行 将注释转移到<div style="float:right;width:400px">↓这就是多出来的那只猪</div>下面,多余的“猪”字也同样消失,页面正常显示。

提示:您可以先修改部分代码再运行 说明:注释造成文字溢出与其位置有关。(可与第2点结合理解)
4、去除<div style="float:right;width:400px">中的“width:400px”,多余的“猪”字消失,页面正常显示。

提示:您可以先修改部分代码再运行 说明:注释造成文字溢出与文字区块的固定宽度有关(无论是绝对值还是相对值)。
5、增加注释的条数:当1条注释时,则多出来1个字;2条注释时,则多出来3个字;3条注释时,则多出来5个字……

提示:您可以先修改部分代码再运行

提示:您可以先修改部分代码再运行

提示:您可以先修改部分代码再运行

提示:您可以先修改部分代码再运行 我们会从上面的规律中得到这样一个公式:溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。
当溢出的文字字数大于文本的字数时,文字区块将会消失。

提示:您可以先修改部分代码再运行 说明:溢出的字数与注释的条数有关。
由1和2的测试得知:注释不要放置于2个浮动的区块之间。
解决方法:
1、不放置注释。最简单、最快捷的解决方法,嘿嘿……

提示:您可以先修改部分代码再运行 2、注释不要放置于2个浮动的区块之间。

提示:您可以先修改部分代码再运行 3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。

提示:您可以先修改部分代码再运行 4、去除文字区块的固定宽度,与3有相似之处。

提示:您可以先修改部分代码再运行 可能以上的分析和解决方法有不到位或者不准确的地方,欢迎讨论指正