前端兼容性问题总结

1.如何在IE6及更早浏览器中定义小高度的容器？

IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。

解决：#test{overflow:hidden;height:1px;font-size:0;line-height:0}

2. 如何解决IE6及更早浏览器浮动时产生双倍边距的bug？

在IE6及更早浏览器出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可

解决：#test{_display:inline} //只有IE6识别

3. 如何在IE6及更早浏览器下模拟min-height效果？

解决：#test{min-height:100px;_height:100px}

注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效

或者是：#test{min-height:100px;height:auto !important;height:100px;overflow:visible}

因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。

4. 如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？

解决：input,button {*overflow:visible;} // IE6/IE7识别

5. 如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？

解决：#test{*vertical-align:top;}

除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

6. 如何解决IE6及更早浏览器下的3像素BUG？

.main{width:950px;background:#eee;}

.content{float:left;width:750px;height:100px;background:#ccc;_margin-right:-3px;}

.aside{height:100px;background:#aaa;}

<div class="main">

<div class="content">content</div>

<div class="aside">aside</div>

</div>

在IE6及更早浏览器下为.content设置margin-right:-3px；也可以设置.aside为浮动，最好设置为浮动

7. 如何解决IE6下的文本溢出BUG？

.test{zoom:1;overflow:hidden;width:500px;}

.box1{float:left;width:100px;}

.box2{float:right;width:400px;}

<div class="test">

<div class="box1"></div>

<!-- 注释 -->

<div class="box2">这就是多出来的那只猪</div>

</div>

运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。

列举几个解决方法：

删除box1和box2之间所有的注释；

不设置浮动；

调整box1或box2的宽度，比如将box的宽度调整为90px

8. 如何解决IE6使用滤镜PNG图片透明后，容器内链接失效的问题？

解决：div{ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='*.png');

width:300px;height:100px;

}

a{_position:relative;}

解决方法是为容器内的链接定义相对定位属性position的值为relative

9. 如何解决IE6无法识别伪对象:first-letter/:first-line的问题？

解决：1. 增加空格：在伪对象选择符:first-letter/:first-line与包含规则的花括号"{"间增加空格。

p:first-letter {float:left;font-size:40px;font-weight:bold;}

p:first-line {color:#090;}

2. 换行：将整个花括号"{"规则区域换行。细节参见E:first-letter和E:first-line选择符

p:first-letter

{float:left;font-size:40px;font-weight:bold;}

p:first-line

{color:#090;}

伪类中的连字符”-”。IE有个BUG，在处理伪类时，如果伪 类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。

10. 如何解决IE8会忽略伪对象:first-letter/:first-line里的!important规则的问题？

p:first-letter {float:left;font-size:40px;font-weight:bold;color:#f00!important;color:#090;}

如上代码，在IE8下color定义都会失效，原因就是因为有color使用了!important规则。鉴于此，请尽量不要在:first-letter/:first-line里使用!important规则

11. 如何解决IE6会忽略同一条样式体内的!important规则的问题？

div{color:#f00!important;color:#000;}

如上代码，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则，也就是说!important被忽略了。解决方案是将该样式拆分为2条，请看下一条

div{color:#f00!important;}

div{color:#000;}在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

12. 如何解决IE6及更早浏览器下当li内部元素是定义了display:block的内联元素时底部产生空白的问题？

a,span{display:block;background:#ddd;}

<ul>

<li><a href="http://css.doyoe.com/">CSS参考手册</a></li>

<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>

<li><a href="http://demo.doyoe.com/">web前端实验室</a></li>

<li><span>测试li内部元素为设置了display:block的内联元素时底部产生空白</span></li>

</ul>

如上代码，IE6及更早浏览器每个li内部的内联元素底部都会产生空白。解决方案是给li内部的内联元素再加上zoom:1

13. 如何解决IE6及更早浏览器下未定义宽度的浮动或绝对定位元素会被内部设置了zoom:1的块元素撑开的问题？

#test{zoom:1;overflow:hidden;border:1px solid #ddd;background:#eee;}

#test h1{float:left;}

#test .nav{float:right;background:#aaa;}

#test .nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none;}

#test .nav li{float:left;margin:0 5px;}

<div id="test">

<h1>Doyoe</h1>

<div class="nav">

<ul>

<li><a href="http://css.doyoe.com/">CSS</a></li>

<li><a href="http://blog.doyoe.com/">CSS</a></li>

<li><a href="http://demo.doyoe.com/">web</a></li>

</ul>

</div>

</div>

如上代码，IE6及更早浏览器div.nav会被设置了zoom:1的ul给撑开。

列举几个解决方法：

设置ul为浮动元素；

设置ul为inline元素；

设置ul的width

14. 如何解决IE7及更早浏览器下子元素相对定位时父元素overflow属性的auto|hidden失效的问题？

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;}

p{position:relative;margin:0;}

<div>

<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>

<p>如果我是相对定位，我的父元素overflow属性设置为auto|hidden将失效。如果你使用的是IE及更早浏览器，你将可以看到这个BUG</p>

</div>

如上代码，在IE7及更早浏览器下你会看到div的滚动条将无法工作。解决方案是给div也设置相对定位position:relative

15. 如何解决Chrome在应用transition时页面闪动的问题？

解决：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

16. 不同浏览器的标签默认的外补丁和内补丁不同

各个浏览器对margin和padding的解析不一致

设置：*{margin:0;padding:0}

17. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的 margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上 display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

在display:block;后面加入*display:inline;*display:table;

18. 几个img标签放在一起的时候，有些浏览器会有默认的间距，加了通配符也不起作用

使用float属性为img布局（尽量使用）

如果使用margin，可能会引起兼容(不建议使用)

19. 火狐与IE对盒模型的解析不一致。

使用：box-sizing:border-box;

20. 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

21. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;

其中margin属性对IE有效，padding属性对FireFox有效.

在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

22. 字体大小定义不同

对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。

解决方法：使用指定的字体大小如14px。

并列排列的多个元素（图片或者链接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

23. CSS双线凹凸边框

IE： border:2px outset;。

FF： -moz-border-top-colors: #d4d0c8 white;

-moz-border-left-colors: #d4d0c8 white;

-moz-border-right-colors:#404040 #808080;

-moz-border-bottom-colors:#404040 #808080;

24. IE6里面：如li设宽、高，并且li里面的标签浮动，那么li之间会有间距

li不设宽、高或者li内的标签不浮动 //*float:none;

25. 当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。

在行内元素里加入{zoom：1}

26. 当多个浮动元素中间夹杂着HTML注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。

给浮动元素添加display:inline;

27. ie6 不支持 fixed

#top{

position:fixed;

bottom:0;

right:20px;

}

#top{

position:fixed;

_position:absolute;

top:0;

right:20px;

_bottom:auto;

_top:expression(eval(document.documentElement.scrollTop));

}

*html{

background-image:url(about:blank);

background-attachment:fixed;

}

#top{

_position:absolute;

_bottom:auto;

_top:expression(eval(document.documentElement.scrollTop));

}

#top{

_position:absolute;

_bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));

}

#top{

position:fixed;

top:50%;

margin-top:-50px;

_position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));

}

28. 解决 ie6 最大、最小宽高 hack方法

.min_width{

min-width:300px;

_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);

}

.max_width{

max-width:600px;

_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);

}

.min_height{

min-height:200px;

_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);

}

.max_height{

max-height:400px;

_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);

}

29. z-index不起作用的 bug

1）ie6下 首先讲讲第一种z-index无论设置多高都不起作用情况。

这种情况发生的条件有：

1、父标签position属性为relative；

2、问题标签含有浮动(float)属性。

2）所有浏览器：它只认第一个爸爸

层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：

父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

30. CSS选择器区分

IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

.content {color:red;}

div>p .content {color:blue;}

31. 以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。

1）字体大小为奇数之边框高度少1px

解决方法：字体大小设置为偶数或line-height为偶数

2）line-height，文本垂直居中差1px

解决方法：padding-top代替line-height居中，或line-height加1或减1

3）与父标签的宽度的奇偶不同的居中造成1px的偏离

解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

32. 内部盒模型超出父级时，父级被撑大

父标签使用overflow:hidden

33. 左浮元素margin-bottom失效

解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 margin- bottom，即(margin-bottom与float不同时作用于一个标签)

34. 块元素中有文字及右浮动的行元素，行元素换行

将行元素置于块元素内的文字前

35. position下的left，bottom错位

为父级(relative层)设置宽高或添加*zoom:1

36. 子级中有设置position，则父级overflow失效

为父级设置position:relative

37. IE6背景闪烁

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

38. 100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

39. 浮动层错位

当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。

浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正， 但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。

40. 躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：

1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>

2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

41. 绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值。

42. Overflow Bug

在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;

43. 横向列表宽度bug

如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。

44. 垂直列表间隙bug

当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

45. IE6中的:hover

在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

46. IE6调整窗口大小的 Bug

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

47. 文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。

48. IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

49. 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例： #box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center;}

<div id="box"> <p>p对象中的内容</p> </div>

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上 border属性

50. 怎样使一个层垂直居中于浏览器中

这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

div{ position:absolute; top:50%;left:50%;margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

51. FireFox下如何使连续长字段自动换行

众所周知IE中直接使用 word-wrap:break-word 就可以了

FF中我们使用JS插入&#10;的方法来解决

<scrīpt type="text/javascrīpt">

function toBreakWord(el, intLen){

var ōbj=document.getElementById(el);

var strContent=obj.innerHTML;

var strTemp="";

while(strContent.length>intLen){

strTemp+=strContent.substr(0,intLen)+"&#10;";

strContent=strContent.substr(intLen,strContent.length);

}

strTemp+="&#10;"+strContent;

obj.innerHTML=strTemp;

}

if(document.getElementById && !document.all)

toBreakWord("ff", 37);

</scrīpt>

52. 经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。

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

53. 绝对定位居中，兼容ie9+

.posCenter{

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}