关于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;width:405px;background:blue;"><div>重复文字测试</div></div>
<div style="float:left;width:405px;background:blue;"><span>重复文字测试</span></div>
关于IE6幽灵字体的更多相关文章
- ie6幽灵文字及解决办法
<!-- ie6 幽灵文字示例 --> <div style="width: 400px;"> <div style="float: lef ...
- div错位/解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...
- 转 CSS hack:针对IE6,IE7,firefox显示不同效果
CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF: ...
- DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- div错位解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...
- css padding在ie7、ie6、firefox中的兼容问题
padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...
- [转载]DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- IE6浏览器兼容问题及部分解决方案(网上整理)
作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...
随机推荐
- Swift语言 代码添加文本输入框 和 占位文本
//懒加载文本输入框 private lazy var textView: UITextView = { let textView = UITextView() textView.font = UIF ...
- 一个CSS小测试
<!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin ...
- 高放的c++学习笔记之关联容器
标准库提供8个关联容器 按关键字有序保存有(红黑树实现) set map multset 关键字可重复出现的set multimap 关键字可重复出现的map 无序保存 哈希实现 unorderre ...
- Y - Design T-Shirt(第二季水)
Description Soon after he decided to design a T-shirt for our Algorithm Board on Free-City BBS, XKA ...
- html表格table设置边框
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- [Laravel 5 教程学习笔记] 一、Windows下安装Laravel 5
最近看到一些统计,说是Laravel是目前PHP框架中使用最多的,所以就想来学习下.之前其实也想过学习这个框架,但是每次到第一步安装的时候就卡住了,无奈 .之前用ThinkPHP的时候,下载完放到网 ...
- 利用Python读取json数据并求数据平均值
要做的事情:一共十二个月的json数据(即12个json文件),json数据的一个单元如下所示.读取这些数据,并求取各个(100多个)城市年.季度平均值. { "time_point&quo ...
- 按钮控件Button
钮窗口(控件)在MFC中使用CButton表示,CButton包含了三种样式的按钮,Push Button,Check Box,Radio Box.所以在利用CButton对象生成按钮窗口时需要指明按 ...
- Linux中判断大小端的一种方法
大小端的定义无需赘言,常用的方法有使用联合体和指针法,如: int checkCPU() { union w { int a; char b; }c; c.a = 1; return (c.b == ...
- Objective-C中单例模式的实现-备
单例模式在Cocoa和Cocoa Touch中非常常见.比如这两个,[UIApplication sharedApplication]和[NSApplication sharedApplication ...