IE6下兼容问题（转载）

首页 > 代码库 > IE6下兼容问题（转载）

2024-07-24 02:32:48 225人阅读

（）1、终极方法：条件注释       缺点是在IE浏览器下可能会增加额外的HTTP请求数。 2、CSS选择器区分 IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。 /* IE6 专用 */ .content {color:red;} /* 其他浏览器 */ div>p .content {color:blue;} --> 3、PNG半透明图片的问题虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。 4、IE6下的圆角 IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。 5、IE6背景闪烁如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片： document.execCommand("BackgroundImageCache",false,true); 6、最小高度 IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。 #container {min-height:200px; height:auto !important; height:200px;} 7、最大高度 //直接使用ID来改变元素的最大高度 var container = document.getElementById(‘container‘); container.style.height = (container.scrollHeight > 199) ? "200px" : "auto"; //写成函数来运行 function setMaxHeight(elementId, height){ var container = document.getElementById(elementId); container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto"; } //函数示例 setMaxHeight(‘container1‘, 200); setMaxHeight(‘container2‘, 500); 8、100% 高度在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。 9、最小宽度同max-height和max-width一样，IE6也不支持min-width。 //直接使用ID来改变元素的最小宽度 var container = document.getElementById(‘container‘); container.style.width = (container.clientWidth < width) ? "500px" : "auto"; //写成函数来运行 function setMinWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth < width) ? width + "px" : "auto"; } //函数示例 setMinWidth(‘container1‘, 200); setMinWidth(‘container2‘, 500); 10、最大宽度 //直接使用ID来改变元素的最大宽度 var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; //写成函数来运行 function setMaxWidth(elementId, width){ var container = document.getElementById(elementId); container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto"; } //函数示例 setMaxWidth(‘container1‘, 200); setMaxWidth(‘container2‘, 500); 11、双边距Bug 当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。 12、清除浮动如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。 #container {border:1px solid #333; overflow:auto; height:100%;} #floated1 {float:left; height:300px; width:200px; background:#00F;} #floated2 {float:right; height:400px; width:200px; background:#F0F;} 更多：http://www.twinsenliang.net/skill/20090413.html 13、浮动层错位当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正，但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。 14、躲猫猫bug 在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。解决方法很简单： 1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span> 2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%; 15、绝对定位元素的1像素间距bug IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。 16、3像素间距bug 在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。给浮动层添加 display:inline 和 -3px 负值margin 给中间的内容层定义 margin-right 以纠正-3px 17、IE下z-index的bug 在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。 18、Overflow Bug 在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。 19、横向列表宽度bug 如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。 20、列表阶梯bug 列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者给<li>定义display:inline;也可以解决。 21、垂直列表间隙bug 当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。 22、IE6中的:hover 在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。 23、IE6调整窗口大小的 Bug 当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。 24、文本重复Bug 在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。

（二）

ie6,ie7兼容性总结

其实浏览器的不兼容，我们往往是各个浏览器对于一些标准的定义不一致导致的，因此，我们可以进行一些初始化，很多问题都很轻松解决。

下面是14条特殊情况仅供参考：

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;width:10px”></div>

c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

8.img 下的留白，大家看这段代码有啥问题：

<div>

</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

9. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效

11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案：给overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

12.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

13.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

14.width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

-----------------------------------------------------------------------------------------------------------------

ie的float bug(ie6,ie7)使前端工程师们为之困扰,最常见的现象就是:当浮动元素的父级元素在拖动滚动条的时候出现边框的缺失,对于此类问题的解决方案就是使浮动元素获得布局.

在诸多的情况中,因为页面需要宽度自由伸缩而不能申明宽度为固定值,但我们可以设置*height:1%;,*在这里可谓是举足轻重,因为*只能被ie7及以下版本解析,ie8并不识别此类写法,所以可以使用这个写法来区别ie8和其他版本号的ie浏览器.对网上流行的ie8 beta1的hack,也算是一个补充.

一些常用的hack测试

* html p {color:red;} 支持 IE6 不支持FF IE7 IE8b

*+html p {color:red;}　　支持 IE7 IE8b 不支持FF IE6

p {*color:red;} 支持 IE7 IE6 不支持FF IE8b

IE8 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^=’val’] //子串以’val’ 开始

E[att$=’val’] //子串以’val’ 结束

E[att*=’val’] //子串中包含’val’

IE8 支持绝大多数基本的 CSS2.1 选择器，不支持的包括但不限于：[:first-line] 、[:first-letter]。

对于 CSS2.1 中的 generated content 部分，即通过使用伪元素 :before 和 :after 添加文本内容，IE8 中支持并未完全。

而对于几乎在其他浏览器中都支持的 opacity 和 RGBA ，IE8 中依旧没有支持。

对于原来用来区分 IE 的 HACK 在 IE8 中基本失效（比如*property:value、*property:value等）。

原有 IE 的 list-item whitespace bug 在 IE8 中依旧存在。

原有 IE 的 z-index bug 在 IE8 中依旧存在。

IE8 中产生新的 bug：当 line-heigth 小于正常值时，超出的部分将被裁切掉。

IE8 中依然不支持 display:table 。

IE8 中依然不支持 border 的 transparent 值。

IE8 中 @import 只支持三层嵌套。

IE8中 border的 transparent 不被支持

IE8中产生新的BUG：line-heigth BUG

/*/p{ color:#1e90ff}/*/　只针对IE8的hack，可以是属性也可以是类

------------------------------------------------------------------------------------------

BUG描述：

页面中某DIV使用了position:relative，结合top=-25px等元素定位。在FF和IE7下表现正常，但是在IE6中该DIV会随鼠标滚动而滚动。

分析：

这是IE6一个已知的BUG：当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。

解决方法：

1.为包含块元素添加属性position:relative 。

2.把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。

————————————————————————————————————————————————————————————————

ie6的末日即将来临,对我们前端开发人员来说,无疑是一个慰藉人心的喜讯.但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避ie6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察(译自http://www.sitepoint.com/)中的10个修复ie6下bug技巧:

1. 使用DOCTYPE

你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者，对于XHTML使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。

2. 设置position: relative

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。

3. 将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。

4. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。

5. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

.确保所有的元素使用”display:inline;”

.在最后一个元素上使用一个”margin-right:-3px;”

.为浮动元素的最后一个条目使用一个条件注释，比如：

.在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。

>>>>>>你还可以访问positioniseverything.net 查看该问题的完整介绍。

6. 在可点击和悬停的元素上只使用<a>标签

IE6只认识对a标签的CSS hover效果。

你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是<a>标签比其它方案更可靠。

7. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

#element {

min-height: 20em;

height: auto !important; /* 所有浏览器都理解这段代码 */

height: 20em; /* IE6 错误的使用这个值 /*

}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.

#element {

min-height: 20em;

height: 20em;

}

/* IE6 无视下面的代码*/

#element[id] {

height: auto;

}

8. 避免百分比单位

百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

body {

margin: 2% 0 !important;

margin: 20px 0; /* IE6 only */

}

9. 尽早测试并不断测试

不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

10. 重构你的代码

经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

-------------------------------------------------------------------------------------------------------

让IE6支持PNG格式的图片

用法：

先复制下面的代码在记事本中，然后另存为pngbehavior.htc（名字可以任意）：

<public:component lightWeight="true">

<public:attach event="onpropertychange" onevent="propertyChanged()" />

<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>

<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>

* PNG Behavior

* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)

* for WebFX (http://webfx.eae.net)

* For usage see license at http://webfx.eae.net/license.html

* Version: 1.02

* Created: 2001-??-?? First working version

* Updated: 2002-03-28 Fixed issue when starting with a non png image and

* switching between non png images

* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x

* 2004-05-09 When printing revert to original

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&

navigator.platform == "Win32";

var realSrc;

var blankSrc = "blank.gif";

var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {

if (!supported || isPrinting) return;

var pName = event.propertyName;

if (pName != "src") return;

// if not set to blank

if (!new RegExp(blankSrc).test(src))

fixImage();

};

function fixImage() {

// get src

var src = element.src;

// check for real change

if (src == realSrc && /\.png$/i.test(src)) {

element.src = blankSrc;

return;

}

if ( ! new RegExp(blankSrc).test(src)) {

// backup old src

realSrc = src;

}

// test for png

if (/\.png$/i.test(realSrc)) {

// set blank image

element.src = blankSrc;

// set filter

element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +

"AlphaImageLoader(src=http://www.mamicode.com/‘" + src + "‘,sizingMethod=‘scale‘)";

}

else {

// remove filter

element.runtimeStyle.filter = "";

}

function beforePrint() {

isPrinting = true;

element.src = realSrc;

element.runtimeStyle.filter = "";

realSrc = null;

}

function afterPrint() {

isPrinting = false;

fixImage();

}

</script>

</public:component>

最后在你的css文件里面加上这么一段代码：

img {

behavior: url("pngbehavior.htc");

}

一切就好了！！你所有的png图片在ie6下都会被支持了！！

IE6下兼容问题（转载）

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > IE6下兼容问题（转载）

IE6下兼容问题（转载）

看完仍有疑问？有类似问题直接问程序猿