IE6 BUG 大全

最新推荐文章于 2024-07-14 12:36:02 发布

shinichi4849

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量688

点赞数

分类专栏：技术宅文章标签： ie css div 测试 javascript

技术宅专栏收录该内容

5 篇文章 0 订阅

订阅专栏

已搬移至新博客：http://blog.guaidm.com

欢迎光临

转自：http://hi.baidu.com/%C7%D7%B0%AE%B5%C4%C1%C1%C1%C1%CD%AC%D1%A7/blog/item/1240164542b4ef32cffca3d3.html

1. li在IE中底部3像素的BUG
解决方案：在<li>上加float:left；即可解决

2. IE6中奇数宽高的BUG
解决方案：就是将外部相对定位的div宽度改成偶数。高度也是一样的。

3. IE6文字溢出BUG
引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
4.可以通过外面再包一次DIV解决
由注释造成文字溢出，属于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. 样式中文注释后引发失效。
满足下面条件就会引起注释下面的样式不起作用：
1. css有中文注释
2. css为ANSI编码
3. html为utf-8编码

解决方法：
1. 去掉中文注释，用英文注释
2. 统一css 和 html 的编码

ps： css为uft-8 html 为ANSI 不会出现失效的情况。

5. li在IE中底部空行的BUG
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。

解决方法：
1. 在li a 样式中加入zoom:1；
2. 在li 样式中加入display:inline ；
3. 将<li>标签写成一行；
4. 在li a 样式中加入width:100%或者一个宽度值；

6. 父级使用padding后子元素绝对定位的BUG
在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。

解决方法：
给外层加宽度或zoom:1

7. display:none引起的3像素的BUG
解决方案1：
将最后一个div加一个margin-right:-3px。
如：<divstyle="display: none; "></div><divstyle="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>
解决方案2：
将display: none的div换一个形式隐藏。
如：<divstyle="position:absolute; visibility: hidden "></div>

8. IE6的图片3px问题
IE 6 中，DIV 使用背景图片（或直接插入图片在DIV中）的时候，在图片的下端会出现一条空白间隔，经测量，刚好是 3px .

解决：
IE6默认字号是12pt，默认行高是normal。
1. 给DIV加上：font-size: 0px;
2. 设置img为“display:block;”。
3. 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。
4.设置图片的浮动属性，“#sub img {float:left;}”。
5.取消图片标签和其父对象的最后一个结束标签之间的空格，这种方法适用范围比较窄，只限于父对象中只包含一个图片对象，而且和父对象的结束标签之间不能有任何空隙。

9. IE6双倍浮动BUG
解决：
解决办法是加上display:inline;

10 .IE6的著名3px BUG（断头台bug）
两个层，一个浮动，一个不浮动，把浮动的一个放在不浮动层中，你会发现两个之间有点间隙，宽度为3px。这个问题是最让人头疼的问题了。

解决方法：
1、所有的层都浮动把右边那个层也设置成浮动层就可以消除这可恶的3px间隔
2、给左边的层，应用margin-right:-3px;，同样可解决IE 3px bug。

11. Ie6图片导致行距无效
解决方法：对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身高度)/2px 0）

12. IE6使用滤镜使PNG图片透明后，容器内链接失效的问题。
解决方法是为链接定义一个相对定位属性。position:relative

13. 禁用文本框中文输入法的通用方法。
<div>验证码<input type="text" style="ime-mode:disabled"/></div> IE可以用ime-mode:disabled，firefox3也开始支持IE的这一私有属性

对于其他不支持的浏览器可以用如下方法模拟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>blueidea</title>
<style type="text/css">
/*<![CDATA[*/
input,textarea {
    width:300px;
    height:20px;
    border:1px solid
    }
textarea {
    height:150px
    }
#pw {
    opacity:0;
    display:block;
    position:relative;
    margin-top:-24px
    }
#tt,#pw {
    width:100px
    }
/*]]>*/
</style>
</head>
<body>
<table>
    <tr>
        <td>标题</td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>内容</td>
        <td><textarea></textarea></td>
    </tr>
    <tr>
        <td>验证码</td>
        <td><input type="text" id="tt"/><input type="password" id="pw"/></td>
    </tr>
</table>
<script type="text/javascript">
// <![CDATA[
var ee = document.getElementById('pw');
ee.onkeyup = function p() {
    document.getElementById('tt').value = ee.value;
} 
// ]]>
</script>
</body>
</html>

14.IE6中PNG Alpha透明

Gulu77整理了4种IE6中PNG Alpha透明的方法：

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html

这里用IE6测试，插入的图片和背景图片没有透明。

第一种方法：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相容性，看到源代码演示文件。

———————————————————————–

如何解决共同问题

1.我已经贴在CSS中，但我pngs并不透明！

请务必记住，路径个文件是相对于HTML文件，而不是的CSS文件（如的CSS背景图像）。如果您想要测试的路径，插入：alert('This works!');进入。宏达文件。

2.它的工程离线而不是在线。

第一次尝试解压这个预设的示范和上传到Web服务器原样。如果它不工作，您可能有一个MIME类型的问题。您必须确保您的服务器发送正确的MIME类型“文本/的X组成部分”的。宏达文件。尝试之一，这两个容易修复程序：

3.上传的。 “ htaccess ”文件，该脚本的下载压缩到Web服务器上，这将使阿帕奇发出正确的MIME类型。

4.而不是所谓的“ IEPNGFIX.HTC ”从你的CSS ，上传IEPNGFIX.PHP的同一文件夹中，并呼吁不是，这也发出了正确的MIME类型。

5.我pngs是透明的，但有一个有趣的边界或红色的“ X ”图标。

检查blankImg变量设置正确的。宏达文件，再次相对应的HTML文件，载PNGs 。

图像扭曲，或此脚本休息，我的网页布局。

当适用于图像没有设置方面，该脚本将尝试与“猜测”正确的图像尺寸和适用的。如果它获得做错了什么，给您一个明确的图像width 。

链接或表单元素一个png’d元素是不能点击。

测试实例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

第四种方法：IE PNG Fix v1.0 / 2.0 Alpha 3

使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
官方原文：http://code.google.com/p/ie7-js/

测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html

shinichi4849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6 BUG 大全

转自：http://hi.baidu.com/%C7%D7%B0%AE%B5%C4%C1%C1%C1%C1%CD%AC%D1%A7/blog/item/1240164542b4ef32cffca3d3.html1. li在IE中底部3像素的BUG 解决方案：在上加float:left；即可解决2. IE6中奇数宽高的BUG解决方案：就是将外部相对定位的div宽度改成
复制链接

扫一扫