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:遵循这些简单的步骤，将此添加到您的网页：
      1. 复制并粘贴iepngfix.htc和blank.gif到您的网站文件夹中。
      2. 复制并粘贴到您的网站的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>
      3. 如果您的网站使用的子文件夹，打开。宏达文件在文本编辑器如Windows记事本，并改变blankImg变数，包括正确道路blank.gif像这样：
        IEPNGFix.blankImg = '/images/blank.gif';

        同样的路径是相对的HTML文件。否则，你将看到一个“破碎的形象”的图形！

      4. 如果你想支持CSS1背景重复和背景位置，请务必包括附加。 js文件在您<head> ：
        <script type="text/javascript" src="iepngfix_tilebg.js"></script>

        否则，背景图片可以工作，但不会重复或立场。

      5. 可以舒舒服服地坐下欣赏！ 也许考虑捐助，以支持该脚本的发展如果你喜欢您所看到的，因为我花了数百小时的开发，测试和支持它： ） 。 另外，我一定会感谢一个入链接您的网站到地雷！
        官方原文：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的优先级的几个基本的规则：

 

    1. ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；
    2. 选择器越具体优先级就越高，也就是
      .classA .classB .classC{font-size: 25px;}
      .classB .classC{font-size:18px}
      .classC { font-size: 12px; }
      这里.classA .classB .classC的优先级最高，.classC的优先级最低；
    3. 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
    4. 标有”!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;

posted @ 2016-08-30 09:49  blogging  阅读(170)  评论(0)  编辑  收藏  举报