IE6文字溢出BUG现文字重复解决办法-百分百源码网

IE6文字溢出BUG现文字重复解决办法

发布时间：01/15 来源：浏览：关键词：

很多朋友可能会碰到过在我们ie6下如果使用浮动可能会出现文字重复的情况，这其实是ie6下的一个bug了，下面我来给大家介绍IE6文字重复解决办法.

看个css教程例子：
XML/HTML代码

代码如下

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://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>

用IE6看一下，你会发现真的会多出一只“猪”！

问题原因以及解决方法：

原因：
由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性

打赏