css文字重复ie bug导致文字的奇怪复制
2009-02-28 14:37
302 查看
当多个浮动的元素彼此跟随,中间加注释的时候,最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
可以通过以下的办法来解决:
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度,与3有相似之处。
5、有的人在猪后加一个<br />或者空格,但只是消除现象。
6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写:<!--[if !IE]>Put your commentary in here...<![endif]-->
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>
可以通过以下的办法来解决:
1、不放置注释。最简单、最快捷的解决方法
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度,与3有相似之处。
5、有的人在猪后加一个<br />或者空格,但只是消除现象。
6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。
7、注释可以这样写:<!--[if !IE]>Put your commentary in here...<![endif]-->
相关文章推荐
- css文字重复ie bug导致文字的奇怪复制
- css 文字重复 ie bug 导致文字的奇怪复制
- DuplicateCharactersBug在IE中的HTML注释引起文字奇怪的复制-DivCSS教程
- 【IE BUG】 CSS/HTML解决在IE6浏览器下显示文字重复
- 又抓到虫子了:IE中奇怪的应用CSS的BUG
- 又抓到虫子了:IE中奇怪的应用CSS的BUG
- 解决IE文字重复显示BUG
- IE中奇怪的应用CSS的BUG分析
- css属性 writing-mode 改变文字书写方向 作为IE的私有属性之一,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性; 复制代码 #test{
- ie CSS 重复最后几个字bug解决方法
- 文字溢出,IE5、6下导致多复制文字的解决方法(文字小尾巴解决方案)
- bug:顺序错误导致CSS伪类覆盖问题
- 打败 IE 的葵花宝典:CSS Bug Table
- 变量重复定义的奇怪bug
- Android防止重复点击,导致不必要的bug
- 【IE大叔开玩笑】之——CSS设置IE6中容器高度的BUG
- DIV+CSS页面设计中的IE6的文字溢出BUG
- 打败IE的葵花宝典:CSS Bug Table
- 打败 IE 的葵花宝典:CSS Bug Table
- 黄聪:IE6下css大bug:文字神秘消失,鼠标选择了才出现