IE6 BUG及解决方案
1.IE6中奇数宽高的BUG
一个外部的相对定位div,内部一个绝对定位的div(right:0)

可是在IE6下查看,却变成了right:1px的效果了:

解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
2、IE6中PNG Alpha透明
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。
很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG,疯狂的IE6只是不支持png的Alpha透明。
第一种方法:AlphaImageLoader 筛选器
微软给出了一个解决方案:http://support.microsoft.com/kb/294714/zh-cn
使用简介:在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片<img src=”.png”/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
第二种方法:PNG Transparency in IE
使用简介:相对来说比较简洁,使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文:http://codingforums.com/archive/index.php?t-80555.html
测试实例:http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
第三种方法:IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本,今天重点介绍的一个方法。
使用简介:页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。
测试实例1:http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2(官方,e文):http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
- 支持<img src=””>元素。
- 支持的背景PNG图像(不像许多其他的脚本! )
- 支持CSS1背景重复和位置(通过可选插件)
- 背景图像可以被界定内置或在外部的样式表。
- 自动处理改为钢骨混凝土/背景通过正常的JavaScript (例如鼠标悬停翻车) -没有特殊的编码需要。
- 改变支持包括CSS的’类别’的变化因素。
- 采用自动变通的<a href=””>要素巴布亚新几内亚背景因素。
- 微小的脚本(快速下载) 。
- 领有牌照的下一个自由软件许可证。如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤,将此添加到您的网页:
- 复制并粘贴
iepngfix.htc和blank.gif到您的网站文件夹中。 - 复制并粘贴到您的网站的CSS或HTML :
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上,给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对H TML文件的位置(不相对的CSS文件! ) 。 例如,你可能看起来像这样:
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style> - 如果您的网站使用的子文件夹,打开。宏达文件在文本编辑器如Windows记事本,并改变
blankImg变数,包括正确道路blank.gif像这样:
IEPNGFix.blankImg = '/images/blank.gif';同样的路径是相对的HTML文件。否则,你将看到一个“破碎的形象”的图形!
- 如果你想支持CSS1背景重复和背景位置,请务必包括附加。 js文件在您
<head>:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>否则,背景图片可以工作,但不会重复或立场。
- 可以舒舒服服地坐下欣赏! 也许考虑捐助,以支持该脚本的发展如果你喜欢您所看到的,因为我花了数百小时的开发,测试和支持它: ) 。 另外,我一定会感谢一个入链接您的网站到地雷!
官方原文:http://www.twinhelix.com/css/iepngfix/
如果你有兴趣了解更多信息或另一种方法激活的脚本保持审定的CSS相容性,看到源代码演示文件。
- 复制并粘贴
3.IE6文字溢出BUG
在IE6下使用浮动可能会出现文字重复的情况.
在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来。
问题原因以及解决方法:
原因:
由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法:
1、不放置注释。最简单、最快捷的解决方法;
2、注释不要放置于2个浮动的区块之间;
3、将文字区块包含在新的<div></div>之间,如:<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>;
4、去除文字区块的固定宽度,与3有相似之处;
5、在后面加一个<br />或者空格;(不推荐)
6、使用IE注释格式,如:<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性
4.div遮盖select的解决方案
IE6以及一下版本下,选择框Select会覆盖Div中的内容
一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容。由于Iframe的可以显示在Select上层,就可以解决这个问题。不过这样做在实现上比较麻烦。有个解决的部分就是在Div内容中加入不显示的Iframe框架即可,不用修改其他内容。
5.li在IE中底部3像素的BUG
增加ul li{float:left; width:100%;}
或者设置li {vertical-align:middle}也解决
或者设置li {vertical-align:text-top}也解决
设置li {font-size:0}也可解决
6、css的优先级及!important在IE6下的一个BUG
css的优先级的几个基本的规则:
- ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;
- 选择器越具体优先级就越高,也就是
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高,.classC的优先级最低; - 在同一个级别的情况下,最后指定的规则优先级就越高,也就是我们通常说的就近原则;html中标签的style的属性都高于css文件中的选择器样式;
- 标有”!important”的规则有最高优先级。(!important是用来提升样式优先级的)
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px; }
HTML代码:
<div id=“idA” class=“classA”>我要20像素的字</div>
我们知道根据上面的规则可以看出#idA{font-size:20px}的样式将被引用,那我们如果要12像素的字呢?
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
HTML代码:
<div id=“idA” class=“classA”>我要12像素的字</div>
这样.classA{ font-size: 12px !important; }这个样式就被引用了。
这种方法在优先级低的样式被优先级高的样式覆盖,又想引用优先级低的样式时候非常有用!
!important在ie6下的一个BUG
还是看这一段代码,
CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
HTML代码:
<div id=“idA” class=“classA”>我要12像素的字</div>
大家可以在IE6下测试一下,文字是12像素的,也就是.classA{ font-size: 12px !important; }被引用了,这证明IE6是支持!important的。但是css hack中用!important来区分ie6,说ie6不支持!important又是怎么回事呢?
原来ie6下,在同一个选择器样式(即同一个大括号里面)下!important是无效的,例如:
css代码:
.classA{ font-size: 68px !important; font-size: 12px }
HTML代码:
<div class=“classA”>我要12像素的字</div>
这里在ie6下是12像素的字,而其他浏览器下是68px的字,当然我们把样式改一下,!important放在后面,即.classA{ font-size: 12px;font-size: 68px !important; },那么ie6下和其他浏览器一样也是68px的字。也就是在同一个选择器样式(即同一个大括号里面)下!important被ie6彻底的无视了。
在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的。还有只要有声明文档类型的不管是html4,xhtml1.o,还有html5(“<!DOCTYPE html>”),除去ie6有上面说的BUG外其他都是正常的。
DTD的声明就是html代码上面的这一句:“<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>”
7.一个display:none引起的3像素的BUG
在ie6下如图

其他浏览器如图:

解决方案1:将最后一个div加一个margin-right:-3px;
解决方案2:将display: none的div换成:visibility:hidden
解决方案3:将第一个div加上一个属性:display:inline;
解决方案4:将原display: none的这个div的所有属性拿掉不拿也行,在div中输入2个任意字符至少2个;
解决方案5:将原display: none的这个div设置样式成:float:left; font-size:0px; height:0px; width:0px; line-height:0px;
IE6 BUG及解决方案的更多相关文章
- IE6 BUG 汇总
1.IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方 ...
- ie6 bug 收集
1.IE6中奇数宽高的BUG IE6下查看,变成了right:1px的效果了: IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数.高度也是一样的查看源码: CSS代码: #o ...
- 移动Web开发的bug及解决方案
我目前移动Web开发遇到的bug以及解决方案(慢慢补充当中). 1.android4.0以上一部分手机的webview中,当canvas小于屏幕大小时,绘图时会出现重影,就是说一个图只绘制了一遍,却出 ...
- MySQL中char(36)被认为是GUID导致的BUG及解决方案
MySQL中char(36)被认为是GUID导致的BUG及解决方案 有时候在使用Toad或在程序中,偶尔会遇到如下的错误: System.FormatException GUID 应包含带 4 个短划 ...
- [转]rpcndr.h和wtypes.h冲突Bug的解决方案
[转]rpcndr.h和wtypes.h冲突Bug的解决方案 http://blog.csdn.net/tzwh_86/article/details/9495133 rpcndr.h和wtypes. ...
- 转:移动开发中一些bug及解决方案
网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,iOS好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个 ...
- IE6 Bug overflow:hidden失效
下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...
- pycharm下: conda installation is not found ----一个公开的bug的解决方案
pycharm conda installation is not found ----一个公开的bug的解决方案 pycharm+anaconda 是当前的主流的搭建方案,但是常出现上述问题. ...
- JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...
随机推荐
- easyui datagrid 格式化列显示两位小数、千分位
{ field: , formatter: function (value, row, index) { if (row != null) { ); } } }, //二位小数.千分位 { field ...
- sublime中开启表格插入
1. 导入包 tableedit 2. ctrl+shift +p 输入teecv,然后开启后面连个东西: 3 按tab可以插入表格
- Netty面试题
1.BIO.NIO和AIO的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大. 伪异步IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源. N ...
- FireDAC 接占线导致另一个 hstmt DataSnap
[FireDAC][Phys][ODBC][Microsoft][ODBC SQL Server Driver]连接占线导致另一个 hstmt 同样的程序,在2台win10 正常,1台win10 报连 ...
- 跟着太白老师学python day11 闭包 及在爬虫中的基本使用
闭包的基本概念: 闭包 内层函数对外层函数的变量(不包括全局变量)的引用,并返回,这样就形成了闭包 闭包的作用:当程序执行时,遇到了函数执行,它会在内存中开辟一个空间,如果这个函数内部形成了闭包, 那 ...
- js判断是否ie浏览器或者浏览器版本
var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like g ...
- eureka快速剔除失效服务
eureka服务端配置 #eureka server刷新readCacheMap的时间,注意,client读取的是readCacheMap,这个时间决定了多久会把readWriteCacheMap的缓 ...
- java中执行子类的构造方法时,会不会先执行父类的构造方法
会,在创建子类的对象时,jvm会首先执行父类的构造方法,然后再执行子类的构造方法,如果是多级继承,会先执行最顶级父类的构造方法,然后依次执行各级个子类的构造方法.
- Centos7 配置
参考文章: http://www.hksilicon.com/kb/articles/594621/CentOS-7 1. 查看时区是否正确timedatectl,若不正确则设置时区 timedate ...
- spring boot aop打印http请求回复日志包含请求体
一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...