文档章节

关于IE6幽灵字体

JavaSwing
 JavaSwing
发布于 2016/11/29 11:09
字数 583
阅读 2
收藏 0

  前言:今天做项目的时候在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;width:405px;background:blue;"><div>重复文字测试</div></div>

 

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

 

 

 

本文转载自:http://www.cnblogs.com/zxdBlog/p/3141305.html

JavaSwing
粉丝 21
博文 44
码字总数 8095
作品 0
杭州
程序员
私信 提问
一次内联元素错位引发对line-height的思考

作者:李一睿 line-height 对于一个前端小可爱来说,应该是一个会经常碰面的老朋友了。可是有一天,我突然发现自己好像对他没那么了解,他也没有外表看起来的那么简单。 事情的经过是这样的…...

滴滴WebApp架构组
2018/11/08
0
0
inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL
2012/09/04
118
0
适用于所有页面的基础样式base.css

这玩意,俗称base.css 几乎所有的页面,在搭建之前,都要用下面那个。BUT 一网打尽并不是最全的,最好的。还是要讲究需要什么用什么,小白知道怎么用就行了,而对于追求更高层次的而言,不仅...

顽皮的雪狐七七
2018/01/17
0
0
切图框架 Slicy 发布 1.3 版本

Slicy 1.3 发布了。该版本最大的变化在于添加了字体图标的支持,基于 CSS3 属性 @font-face 使用自定义字体,这是让前端工程师拍手称赞的一件事情。在 CSS3 之前,前端页面的字体只能使用设备...

专注做前端
2016/08/19
1K
2
CSS完美兼容IE6/IE7/FF的通用方法

CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1、 !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明...

羊皮卷
2018/08/08
81
2

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部