IE6,7,8下多余字符bug

quirk mode下IE6,7,8均会产生此bug,standard mode下IE6会产生此bug,但条件稍微有些不同(外层div需指定宽度)。

 

先看quird mode下:div中包含的span都向左浮动,.tltle和.intro的宽度都是50%,这时候在IE6,7,8上都会出现一个多余的'e'。当然.title和.intro的宽度百分比可以任意指定,只要两者加起来为100%即可。

<html>
  <head>
    <title>quirk mode 下IE6,7,8多余字符bug</title>
	<meta http-equiv="Content-Type" content="text/html;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>
 

再看下standard mode下:在IE6下仍然会产生此bug,但条件是div须指定宽度;IE7,8不会产生次bug了。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>standard mode下IE6多余字符bug</title>
	<meta http-equiv="Content-Type" content="text/html;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>

 

 

 

你可能感兴趣的:(html,css,XHTML)