IE6 的兼容相关问题
因为在实习公司要求兼容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 的兼容相关问题的更多相关文章
- ie6的兼容总结
ie6的兼容处理总结 1.透明背景图: .timer { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my.png ...
- IE6浏览器兼容问题及部分解决方案（网上整理）
作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...
- IE6不兼容问题
IE6不兼容问题 一.选择器兼容问题 1.交集选择器从IE7以上兼容(div.special): 2.儿子选择器(>):IE7开始兼容,IE6不兼容. 3.序选择器(first ...
- IE6部分兼容问题
border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样) a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类. ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- min-height最小高度的实现（兼容IE6、IE7、FF）（解决IE6不兼容min-height）
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- ie6下兼容问题
最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 ...
- 不能用100%ie6不兼容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ie6的兼容问题及解决方案
1.png24位的图片在ie6浏览器上会出现背景,解决方案是做成png8位: 2.浏览器默认的margin和padding不同,解决方法是用全局重置来统一,即是*{margin:0;padding:0 ...
随机推荐
- Python3.5之TuShare
这部分是直接搬运过来的,官方网站http://tushare.waditu.com/ TuShare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据 ...
- ABAP 常见查询问题解决方法
在ABAP 编程的时候会遇到查询单条语句的时候数能取对 但是条目数多了的话 会出现数不准确的问题 原因可能出现在查询使用了二分法查询方式 二分法查询下必须按排序的字段排序 还得按照排序的字段 ...
- <css系列>之css--float总结
一.float的历史 float的设计初衷是实现文字环绕效果. 如下图,对图片添加float,文字实现环绕效果. 二.float特性 1.包裹性,表现:收缩.坚挺.隔绝.具有包裹性的属 ...
- RecyclerView的使用之多种Item加载布局
精益求精,为了更加透彻熟练得掌握,本文再次给大家介石介绍下如何利用RecyclerView实现多Item布局的加载,多Item布局的加载的意思就是在开发过程中List的每一项可能根据需求的不同会加载不 ...
- LeetCode 204 Count Primes
Problem: Count the number of prime numbers less than a non-negative number, n. Summary: 判断小于某非负数n的质数 ...
- 最短路（Floyd）
关于最短的先记下了 Floyd算法: 1.比较精简准确的关于Floyd思想的表达:从任意节点A到任意节点B的最短路径不外乎2种可能,1是直接从A到B,2是从A经过若干个节点X到B.所以,我们假设maz ...
- Top 命令详解
Top 命令详解 先感受一下top命令的执行结果吧!哈哈-- top - 17:32:34 up 3 days, 8:04, 5 users, load average: 0.09, 0.12, 0. ...
- Vi命令备忘
备忘 Ctrl+u:向文件首翻半屏: Ctrl+d:向文件尾翻半屏: Ctrl+f:向文件尾翻一屏: Ctrl+b:向文件首翻一屏: Esc:从编辑模式切换到命令模式: ZZ:命令模式下保存当前文件所 ...
- 禁止换行“white-space:nowrap;”！
"white-space:nowrap;" <html> <div class="box">精彩的生活,精彩的世界</div> ...
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...