IE6多出一只猪的经典bug

<!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="400px">
<div style="float:left;">IE6多出一只猪bug</div> 
<!-- -->
<!-- -->
<div style="float:right;400px; border:1px solid red;">↓猪随注释个数递增，这就是多出来的那只猪</div>
</div>
</body>
</html>

1、在IE、FF中测试，只在IE出现文字溢出现象。

说明：注释造成文字溢出是IE的BUG。

2、去除<div style="float:left"></div> 中的“float:left;”，你会发现多出来的“猪”字不见了，页面正常显示。

3、同样去除 <div style="float:right;400px">中的“float:right;”，多余的“猪”字也同样消失，页面正常显示。

4、将注释转移到浮动块内，多余的“猪”字消失，页面正常显示。

5、去除文字区块的固定宽度。

<!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="400px"><div style="float:left;">IE6多出一只猪bug</div> <div style="float:right;400px; border:1px solid red;">↓猪随注释个数递增，
这就是多出来的那只猪</div></div></body></html>