zoukankan      html  css  js  c++  java
  • HTML-IE6复制BUG

    在IE6下使用浮动可能会出现文字重复的情况.

    在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来。

    看个例子:

    XML/HTML代码
    <!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=“400px”>  
            <div style=“float:left”></div>    
            <!– _ –>  
            <div style=“float:right;400px”>↓这就是多出来的那只猪</div>  
        </div>  
    </body>  
    </html> 
    

    用IE6看一下,你会发现真的会多出一只“猪”!

    问题原因以及解决方法:

    原因:
    由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

    解决办法:
    1、不放置注释。最简单、最快捷的解决方法;
    2、注释不要放置于2个浮动的区块之间;
    3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right; 400px”><div>↓这就是多出来的那只猪</div></div>;
    4、去除文字区块的固定宽度,与3有相似之处;
    5、在后面加一个<br />或者空格;(不推荐)
    6、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–>
    7、给盒子加position:relative;属性(本人这次碰到的问题就是用的这个方法在p标签上加了position属性


    引发这种BUG有几个条件
    1.是注释引起的,删除所有注释即可.
    2.hidden的input直接放在form下.
    3.display为none的div也有可能引发此bug.(本人这次碰到的情况!并不是注释引起的在IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。解决办法:给浮动元素添加display:inline;。
    2,3可以通过外面再包一次DIV解决

    参考下文:转自http://blog.jobbole.com/47676/

    HTML代码:
    <div>
        <p>
            <span>A</span>
            <span>B</span>
            <span>C</span>
        </p>
    </div>

    CSS代码:
    div {
        100px;
    }
     
    p {
        margin-right: 1px;
    }
     
    span {
        float: left;
        120px;
    }

    设置如下:演示中有一个div元素,有明确的width设置,在这个div中,有一个元素P——此元素有margin-right属性且该值不为0(在IE6中margin不是必需的),且在该P元素内部有三个浮动的子元素,且这三个子元素的width值比外层元素div的width大。我们来看一下在受影响的浏览器中出现了什么情况:最后一个字符“C”——被复制并重新显示在下一行。我已经强调过这里是有三个浮动元素,目前情况就是:如果有少于三个的浮动元素,此bug不会发生,而如果浮动元素数目多于三个,连续浮动元素bug就出现了。

     
    解决方案

    下面是针对此bug的解决方案

    解决日期

    2009 8.18 11:32:52 星期二

    修复版本

    所有受影响的IE

    描述

    注意:此方案也适用于针对浮动元素bug的CS解决方案

     

    我们要用IE的bug修复利器去修正该bug。不!我不是在说“layout”,虽然可以通过设置P元素的layout以便IE7下修正该bug(IE6不适用)。来看看现在的页面:

     

    修正后的页面:在单独的页面打开

    HTML代码:
    <div>
        <p>
            <span>A</span>
            <span>B</span>
            <span>C</span>
        </p>
    </div>

    CSS代码:
    div {
        100px;
    }
     
    p {
        margin-right: 1px;
    }
     
    span {
        float: left;
        120px;
        position: relative; /*主要是这行!!*/
    }

    唯一的区别是:我们在浮动元素span上加了position:relative这个属性,字符C就不会再IE6和IE7中出现”复制”的现象了。

  • 相关阅读:
    PHP应用目录结构设计
    php 项目性能优化
    Zend Framework的PHP编码规范【1】
    php 如何做在线人数统计
    linux 文件权限
    总结:常用的通用数据处理指令
    全排列(含递归和非递归的解法)
    局部变量,静态局部变量,全局变量,静态全局变量在内存中的存放区别(转)
    C++中引用详解
    Pascal三角形
  • 原文地址:https://www.cnblogs.com/JohnABC/p/3682384.html
Copyright © 2011-2022 走看看