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

原创 2013年12月05日 17:20:24

最初开发的时候是在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文件引用,并添加如下代码

<!--[if IE 6]>
<script src="../js/DD_belatedPNG.js"></script>
<script>
$(document).ready(function () {
DD_belatedPNG.fix('.png, img');
})
</script>
<![endif]-->

代码中的“.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的先后顺序控制好。



相关文章推荐

WEB前端开发 解决IE6、IE7、IE8样式不兼容问题

如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下: CODE: ...

IE6Bug(WEB前端开发 http://www.css88.com/)

css的优先级及!important在IE6下的一个BUG[2009年8月1日更新]  一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!i...

前端开发学习之道:DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。 1.div的垂直居中问题 vertical-al...

前端福音:火狐 IE6 IE7 css之兼容问题解决

IE6,IE7: margin-left不兼容 用display:inline; IE和火狐不兼容用 !important CSS hack:区分IE6,IE7,firefox 区...

【转载】IE6 浏览器常见兼容问题 大汇总(23个)

IE6以及各个浏览器常见兼容问题 大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容...

IE6 浏览器常见兼容问题 大汇总(23个)

1.文档类型的声明。 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象; 解决办法:书写文档声明。 2.不同浏览器当中,很多的标签的默认样式不同,如默认...

IE6兼容问题汇总

转载自点击打开链接 1、终极方法:条件注释 这段文字仅显示在 IE6及IE6以下版本。 这段文字仅显示在 IE6及IE6以上版本。 这段文字仅显示在 IE6以上版本(不包含IE6)。 ...

IE6兼容性问题及解决办法汇总

1、IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明 2、IE6在块元素、左右浮动、设定marin时造成margin双...
  • bboyjoe
  • bboyjoe
  • 2016年05月10日 11:28
  • 1878

IE6以及各个浏览器常见兼容问题 大汇总

IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端开发中IE6的问题的汇总
举报原因:
原因补充:

(最多只允许输入30个字)