怪异模式中IE6/7/8/9均会产生此bug,标准模式中IE6会产生此bug,但条件稍微有些不同(外层div需指定宽度)。
先看怪异下:div中包含的span都向左浮动,.tltle和.intro的宽度都是50%,这时候在IE6,7,8上都会出现一个多余的'e'。当然.title和.intro的宽度百分比可以任意指定,只要两者加起来为100%即可。
<html>
<head>
<title>怪异模式中IE6,7,8多余字符bug</title>
<meta charset="utf-8">
<style type="text/css">
.title {width:50%;float:left;}
.intro{width:50%;float:left;}
</style>
</head>
<body>
<div>
<span class="title">1</span><span class="intro">one</span>
<span class="title">2</span><span class="intro">two</span>
<span class="title">3</span><span class="intro">three</span>
</div>
</body>
</html>
IE6/7/8/9 中效果如下
看见没,多出了个字母e。呃..IE9还有这个问题。
再看下标准模式中:在IE6下仍然会产生此bug,但触发条件是div须指定宽度;IE7/8/9不会产生次bug了。
<!DOCTYPE html>
<html>
<head>
<title>标准模式中IE6多余字符bug</title>
<meta charset="utf-8">
<style type="text/css">
div{width:300px;/*须指定*/}
.title {width:50%;float:left;}
.intro{width:50%;float:left;}
</style>
</head>
<body>
<div>
<span class="title">1</span><span class="intro">one</span>
<span class="title">2</span><span class="intro">two</span>
<span class="title">3</span><span class="intro">three</span>
</div>
</body>
</html>
IE6下效果如下
此bug甚为神奇,记录下。