zoukankan      html  css  js  c++  java
  • IE6/7/8/9怪异模式和IE6标准模式中多余字符Bug

    怪异模式中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 {50%;float:left;}
    		.intro{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{300px;/*须指定*/}
    		.title {50%;float:left;}
    		.intro{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甚为神奇,记录下。

  • 相关阅读:
    求最大的矩形(悬线法)
    限制不互素对的排列(构造)
    括号(构造)
    G. 4.奶牛(二进制枚举)
    新飞行棋(上楼梯)
    小天狼星的访问
    欧拉筛线性筛法,约数和和约数个数
    Find The Multiple
    How Many O's? UVA
    GCD LCM UVA
  • 原文地址:https://www.cnblogs.com/snandy/p/1980007.html
Copyright © 2011-2022 走看看