前端开发中IE6的问题的汇总

最初开发的时候是在IE10上开发，并简单测试firefox，当开发完在IE6上兼容性测试时，一打开就傻眼了，所有的页面就没有能看的。

整整用了两天的时间对应所有IE6，记录下来方便自己以后查询，也方便大家参考。

（个人认为之所以出现IE6的问题，很少一部分原因在于IE6的解析的不同，而主要的原因还在于个人开发时使用的css以及布局并不是最优的，开发时只是单纯的实现效果。）

先说明IE6一些本身的问题：

1.jpg的透明图片在IE6下失去透明效果

.banner_prev
{
    left:22px;
    background:transparent url(../images/narrow_prev.png) no-repeat;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/narrow_prev.png");/*IE6有效*/
    _background:none;/*IE6有效*/
}

解决方法是添加IE6的滤镜，采用hack，_和*效果一样IE6都可以识别，而更高的版本以及别的浏览器不识别。

2.png的<img>标签的图片在IE6下被自动添加了纯色的背景。

正常效果

IE6的效果

解决方法是下载链接http://down.51cto.com/data/1033182的文件，该文件是我上传的，不需要下载豆，免费下载。

将该js文件引用，并添加如下代码



代码中的“.png”为固定写入，“img”代表<img>标签，也可以是.class或#id

3.margin-left的双倍边距

举个例子

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

第一种情况：所有的li都左浮动，但每行只显示两个，这样就会出现li自动换行，如果此时设置li的margin-left，则在IE6下出现的效果是margin-left为

设置的值得2倍。

这是因为在IE6下如果有浮动且换行了，那么第一个浮动元素的margin-left就会变成双倍。

第一种情况：如果一个非block的元素，你设置成block显示，则第一个元素margin-left也会出现双倍的问题。

两种情况的解决方法都是是将li（即第一个元素）的dispaly设置为display:inline; 或者不是用li的margin-left而是用ul的padding-left

4.IE6的layout问题

在IE6中浮动会有一定的问题，而此时需要出发IE6的layout，

可以对父元素增加width：XXX，或height：XXX或float：XXX或zoom：1

其中zoom：1为最常用的方法。

在IE7下zoom：1没有效果，需要添加width：100%；

5.IE6对css选择器的支持

此处说的css选择器不是jquery的选择器，而是css中选择器的写法，IE6对以下的写法不能识别，也正因这浪费了我整整1个小时调试一个问题。

①子选择器：E1 > E2

该选择器的意思是选择E1下面的直接子节点，不包括子的后代节点，而E1 E2的写法是选择E1下面的所有为E2的后代

IE6对E1>E2的写法不支持，但支持E1 E2的写法，但在写的时候除非有必要，否则E1 E2的方式也少用，因为如果后代有很多相同的节点，容易

不好控制，最好设置其id或class。

②相邻选择器E1+E2

选择E1相邻的E2，同样IE6不支持。

6. IE6的scrollHeight

    页面上有个按钮，点击的话我的透明的灰色蒙版将整个页面盖住，在IE6下当右侧滚动条没有出现时，我用js设置蒙版的高度为document.body.scrollHeight

此时发现蒙版并没有覆盖全部的高度，下方还剩余一些

解决方法是：采用document.documentElement.scrollHeight

因为在IE6里document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度

7. IE6不支持min-width和min-height

我采用的解决办法是用js给width。

以下是个人写css时不规范而在IE6下出现的问题：

1.水平居中

<div><a>xxxxxxx</a></div>

要想让a标签水平居中，设置div的text-align是没有效果的，该css只是让xxxxx文字水平居中，

最初我用的是对a标签设置margin-left，但IE6下解析的效果不一致。

正确的写法应该是设置a标签的margin：auto；这样会自动居中，所有浏览器都适用。

2.padding最好少用

padding在用的时候会使元素的大小发生变化，也会引起父元素的变化，尽可能改成父元素的margin，margin不会引起变形。在所有的浏览器上都一样。

3.！important最好少用

！important虽然能解决临时的问题，但用多了会导致整个文档不受控制非常难以维护，所以应该以css的角度去控制，尤其是css的先后顺序控制好。

前端开发中IE6的问题的汇总相关推荐

前端开发中IE6,IE7,IE8的问题的汇总
面对微软的霸道,反抗到今天终于有了点起色.但仍然有n多ie678的用户. 反抗霸道,任重道远. 百度居然还总结这种文章,让别的blog活么. 如何处理浏览器IE6.IE7.IE8.css bug兼容性 ...
【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
前端开发中的调试技巧
前端开发中的调试技巧骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
前端开发中icon图标使用的那些门道儿
前端开发图标使用在日常开发,前端coder绕不开一个话题,在页面上添加各种小图标,比如或者是这样的: 一般来说,总体上有三种方案: 位图图标,png图片,经典的使用场景--精灵图: 字体图标,比较 ...
一探前端开发中的JS调试技巧
转自:http://seejs.me/2016/03/27/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E4%B8%80%E6%8E%A2%E5%89%8D%E7%AB% ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...