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