• 关于IE6幽灵字体


      前言:今天做项目的时候在IE6下出现了这样的一种现像,这种情况只在IE6下出现,最后在网友的帮助下这个问题最终得到了解决。所以马上作了下笔记!

    情况如下图:

     我在网上找了点资料出现IE6下幽灵字体的情况主要有以个几个!   

    1、一个容器包含2两个具有“float”样式的子容器。

    2、第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3(注意是小于3,当等于3时不会出现重复文字)。

    3、在第二个容器前存在注释

    4、多出文字个数与注释的条数有关

       多出文字个数=注释条数*2-1

       当多出文字个数大于容器中的字数时,多出文字消失

    我的情况就是属于第三种情况,出现这种情况解决也有好几种:

     

    1、不写注释(简单直接有效的方法,但降低了代码可读性)

     

    2、将html注释<!---->换成IE注释 <!--[if !IE]>这里是注释内容[endif]-->

     

       或 注释不放置于 2 个浮动的区块之间。

     

    3、在第二个容器后面加一个或者多个<div style="clear"></div>来解决

     

    其中clear 样式:

     

    .clear{clear:both;font-size:0;height:0;}

     

    Clear:both 和 height:0 是必须得写的font-size 可以不写(建议写,因为在ie6中div会有一个默认高度,修复了旧bug但引来了新bug,还得要解决这个IE6默认高度的bug)

     

    针对上面的问题可以这样写

     

    写法一:<div style="clear:both; height:0;"><!----></div>

     

    写法二:<div style="clear:both;height:0;font-size:0;overflow:hidden;"></div> 

     

    4、设置div的宽度,针对条件二,只要不让第二个div的宽度大于父容器,或者不让父容器减去第二个容器宽度小于3 ,就可以消除这个bug,但是这样会影响布局

     

    5、将文字区块放在新的容器中(这种解决方法很不错,不需要刻意去修正这个bug)

     

           <div style="float:left;405px;background:blue;"><div>重复文字测试</div></div>

     

             <div style="float:left;405px;background:blue;"><span>重复文字测试</span></div>

     

  • 相关阅读:
    [栈]
    [数据结构实验]学生成绩管理
    [数据结构实验]集合交并
    shapefile 转 geojson 文件类型
    ubuntu sublime text key
    opengl
    c++
    sublime text3 key
    ubuntu安装nvidia驱动
    全球国家svg边界svg
  • 原文地址:https://www.cnblogs.com/zxdBlog/p/3141305.html
Copyright © 2020-2023  润新知