IE6下BUG 网页多出一个字 IE bug

最新推荐文章于 2024-09-20 16:06:21 发布

cloudday

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： ie float div xhtml 测试 html

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

看看下面这段网页代码，在IE6下面居然会多出一个“猪”

<!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>

觉得很有意思。于是在想到底是什么原因造成的呢？便做了以下测试：

实验代码如下:

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

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”，多余的“猪”字消失，页面正常显示。

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