坑爹的IE6 bug以及解决办法

1.强制浏览器是用Web标准解析(网上全是解析成4.01的不知道有没有5的。。)
HTML的写法
<!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”>

2.CSS选择器区分
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。 
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.getElementByIdx_x(‘container’);
container.style.height = (container.scrollHeight > 199) ? “200px” : “auto”;

//写成函数来运行
function setMaxHeight(elementId, height){
var container = document.getElementByIdx_x(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.getElementByIdx_x(‘container’);
container.style.width = (container.clientWidth < width) ? “500px” : “auto”;

//写成函数来运行
function setMinWidth(elementId, width){
var container = document.getElementByIdx_x(elementId);
container.style.width = (container.clientWidth < width) ? width + “px” : “auto”;
}

//函数示例
setMinWidth(‘container1′, 200);
setMinWidth(‘container2′, 500);

10.最大宽度

//直接使用ID来改变元素的最大宽度
var container = document.getElementByIdx_x(elementId);
container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;

//写成函数来运行
function setMaxWidth(elementId, width){
var container = document.getElementByIdx_x(elementId);
container.style.width = (container.clientWidth > (width – 1)) ? width + “px” : “auto”;
}

//函数示例
setMaxWidth(‘container1′, 200);
setMaxWidth(‘container2′, 500);

11.双边距Bug
IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。

12.清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素,你会发现必须给div(容器)定义明确的height、width、overflow之中一个 属性(除了auto值)才能将浮动元素严实地包裹。

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:hidden失效
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。 解决这个bug很简单,在父元素中使用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.文本重复Bug
在IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。解决办法:给浮动元素添加display:inline;。

23.IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。解决办法:
给body定义position:relative;就行了。

时间: 2024-08-27 07:05:32

坑爹的IE6 bug以及解决办法的相关文章

IE6绝对定位的bug及其解决办法

IE6绝对定位的bug及其解决办法.position:absolute定位在IE6下存在left和bottom的定位错误问题: Example Source Code IE6下的left定位错误–> <!–IE6下的left定位错误–> 上面这段代码在IE6中定位错误. 解决办法有两种: 1.给父层设置zoom:1触发layout. 2.给父层设置宽度(width). Example Source Code –解决方法1 zoom:1–> –解决方法2 设置width–> 下

【转载】IE浏览器常见的9个css Bug以及解决办法

IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见

E浏览器常见的9个css Bug以及解决办法

我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已,有时候需要通过专为IE6或者IE8设计单独的定义.IE浏览器则因此被公认为Web程序员的毒药,虽然在微软官网上并没有提供相关的解决方案,但是IE浏览器的兼容性存在的问题却是Web程序员必须熟练掌握的.本文总结了9个IE浏览器上最常见的Bug,以及它们的解决方案. 在IE上开发时间

写出几种IE6 BUG的解决方法

1.双边距BUG float引起的  使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.Ie z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决’ 7.select 在ie6下遮盖 使用iframe

vcffilter 工具bug以及解决办法

1,使用说明: usage: vcffilter [options] <vcf file> options: -f, --info-filter     specifies a filter to apply to the info fields of records, removes alleles which do not pass the filter -g, --genotype-filter specifies a filter to apply to the genotype fi

IE6双边距bug及其解决办法

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body,div{ margin:0; padding:0; } #div1{ width:200p

JS浮点数运算Bug的解决办法【转】

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 网上找到了一些解决办法,就是重新写了一些浮点运算的函数或直接扩大倍数运算. 下面就把这

unity, StopAllCoroutines导致bug的解决办法

StopAllCoroutines有时候不用不行. 但只要一用,就可能导致无穷无尽的bug. 原因是StopAllCoroutines会将当前脚本中所有coroutines都停掉,而没法做到只停掉我们想停的那一部分coroutines. 解决办法是:用多个脚本. 把一组想一停全停的一组coroutines放在一个脚本里,把另一组想一停全停的一组coroutines放在另一个脚本里...

使用Hibernate+MySql+native SQL的BUG,以及解决办法

本来是mssql+hibernate+native SQL 应用的很和谐 但是到了把mssql换成mysql,就出了错(同样的数据结构和数据). 查询方法是: [java] view plaincopy String sql = "select id XXX_ID  from t_tab"; List<Map> list = session.createSQLQuery(sql) .setResultTransformer(Transformers.ALIAS_TO_ENT