您的位置：浩海代码网 » CSS代码 » IE6/7/8/9怪异模式和IE6标准模式中多余字符Bug

IE6/7/8/9怪异模式和IE6标准模式中多余字符Bug

CSS代码 2011-03-11 07:46:39 作者: 浩海代码网阅读() 评论字号：大中小订阅

怪异模式中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下效果如下