因为在实习公司要求兼容IE6+，所以将IE6相关的样式兼容问题列出，及解决方案。

1.让页面变丑的透明背景图片问题：

HTML都为以下代码：

<div class="img-png"></div>

一般情况下使用png格式图片作为背景图片CSS部分：

.img-png{

       width:64px;

       height:64px;

       background: url("imgsss/day.png") no-repeat;

}

效果图：

chrome下：　　　　IE6下：

      

　　IE6下是不是很丑，带一个灰色的底色。面对这种问题，解决方案是：针对IE6，使用 png8格式的图片来做背景图片，在IE6效果如下：

　　　　　　

　　终于没那么丑了，但是最好分开写，只在IE6时使用png8,因为png8色彩度等很低，会影响图片质量。分开的写法如下：

 .img-png{

       width:64px;

       height:64px;

       background: url("imgsss/day.png") no-repeat;/*IE6自动跳过*/

       _background:url("imgsss/day-png8.png");/*显示此样式*/

   }

2.让带有透明度背景颜色消失的问题：

HTML部分同上一条；

一般写法的情况下的CSS部分：

   body{background: blue;}

   .img-png{

       width:64px;

       height:64px;

       background-color: #000;

       opacity: 0.5;

   }

chrome下：　　　　　　　IE6下：

              

是不是看完整个人都不好了，变成一块黑了，对于此现象解决方法是：（运行效果跟chrome相同啦~）

.img-png{

      width:64px;

      height:64px;

      background-color: #000;

      opacity: 0.5;

    filter: alpha(opacity=70);/*增加此方法*/

  }

3.IE6怪异解析将padding与border算入宽高：

看看你的HTML第一行是不是没有写文档申明！

因为没加入文档声明<!doctype html> ，所以造成非盒模型解析的原因，加入就好了。

4.当块元素左右浮动，设定margin时造成双倍边距：

使元素变成行内元素：display：inline

5.内部盒模型超出父级，父级被撑大：

在父级元素内使用overflow：hidden，隐藏超出内容

6.img作为块元素时，底边多出空白，并且带有蓝色的边框：

对于多出边框(3种方法）：

　　a.让父级设置 overflow：hidden;
　　b.设置 img{display:block;}

　　c.设置 _margin:-5px;
对于图片带有蓝边的问题：

　　设置 img{border:none;}

7.li间有间距(3种方法）：

　  a.设置float:left;

　　b.设置display:inline;

　　c.给li中文本末尾添加一个空格

8.块级元素中含有 文字和带有右浮动的元素，右浮动的行内元素自动换行：

HTML部分：

<h3>我是个标题<a href="" style="float:right">更多>></a></h3>

CSS部分：

body{background: yellow;width: 30%;margin: 0 auto;color: #444444;}

chrome下：

IE6下：

解决方案，将你想要右浮动的行内元素放在文字的前面，就变成跟chrome一样想要的效果了：

<h3><a href="" style="float:right">更多>></a>我是个标题</h3>

9.设置position属性时，left、top发生错位：

为想要作为参照的父级（position：relative;)，设置宽高或者添加 *zoom：1;

10.子级中设有position属性，导致父级overflow失效：

为父级设置 position：relative;

11.圆角问题：

使用圆角图片定位到边框（不然就放弃在IE6的圆角效果，不影响功能）

12.IE6背景闪烁

将链接、按钮用CSS sprites作为背景，鼠标触碰会发生闪烁的情况，因为IE6没有将图片缓存，每次触碰都会重新加载，解决方法（2种）：

　　a.不使用雪碧图

　　b.用JavaScript设置IE6缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

13.IE6调整窗口大小时，body居中，body里的相对定位元素固定不动：

给body设置 position：relative;即可

大部分解决方案都亲测有效 ，会随着遇到的更多问题来继续添加。

so 未完待续~

IE6 的兼容相关问题的更多相关文章

  1. ie6的兼容总结

    ie6的兼容处理总结 1.透明背景图: .timer { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png ...

  2. IE6浏览器兼容问题及部分解决方案（网上整理）

    作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...

  3. IE6不兼容问题

    IE6不兼容问题 一.选择器兼容问题          1.交集选择器从IE7以上兼容(div.special): 2.儿子选择器(>):IE7开始兼容,IE6不兼容. 3.序选择器(first ...

  4. IE6部分兼容问题

    border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样) a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类. ...

  5. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  6. min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  7. ie6下兼容问题

    最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 ...

  8. 不能用100%ie6不兼容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. ie6的兼容问题及解决方案

    1.png24位的图片在ie6浏览器上会出现背景,解决方案是做成png8位: 2.浏览器默认的margin和padding不同,解决方法是用全局重置来统一,即是*{margin:0;padding:0 ...

随机推荐

  1. 设计模式--装饰模式Decorate（结构型）

    一.装饰模式 动态地给一个对象添加额外的职责.就增加功能来说,装饰模式相比生成子类更为灵活.有时我们希望给某个对象而不是整个类添加一些功能. 二.UML图 1.Component(概念中提到的对象接口 ...

  2. Andrew Ng在coursera上的ML课程_知识点笔记_(1)

    1.Feature Scaling(特征缩放): 如上图所示,x1是房屋面积,x2是房间个数,若不进行特征缩放,则代价函数J的曲线近似为一个瘦长的椭圆(我暂时这么理解,θ1和θ2分别是x1和x2的权值 ...

  3. gdb 调试多线程

    基本i threads 等操作略过,只谈线程同步.异步控制: 先点到,gdb attach到主线程t1 时,所有线程都会停止,所谓同步异步效果,是指在apply continue到所有线程之后, 再切 ...

  4. go：关于变量地址的疑惑

    定义一些变量,并输出其地址 一.一般变量 var a, b int32 var c, d int64 输出其地址 结果: a 0xc082006310 b 0xc082006320 c 0xc0820 ...

  5. html5 sessionStorage 与 localStorage存储

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  6. C语言中，头文件和源文件的关系（转）

    简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成纯汇编语句, ...

  7. 将DataReader转换为DataTable

    public static DataTable ConvertDataReaderToDataTable(SqlDataReader dataReader) { ///定义DataTable Data ...

  8. ubantu16.04+mxnet +opencv+cuda8.0 环境搭建

    ubantu16.04+mxnet +opencv+cuda8.0 环境搭建 建议:环境搭建完成之后,不要更新系统(内核) 转载请注明出处: 微微苏荷 一 我的安装环境 系统:ubuntu16.04 ...

  9. CI中的数据库操作

    转载于:http://blog.sina.com.cn/s/blog_76e7bdba01016p2p.html CI中第一次连接数据库,在控制器或模型的构造函数里输入以下语句 $this->l ...

  10. 阿里开源消息中间件RocketMQ的前世今生-转自阿里中间件

    昨天,我们将分布式消息中间件RocketMQ捐赠给了开源软件基金会Apache. 孵化成功后,RocketMQ或将成为国内首个互联网中间件在Apache上的顶级项目. 消息一出,本以为群众的反应是这样 ...