前端常见的浏览器兼容性问题及解决方案

＜/div>再嵌⼊⼀个float left⽽宽度是100%的DIV解决之。④万能float 闭合(⾮常重要!)关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加⼊Global CSS 中,给需要闭合的div加上class="clearfix"即可,屡试不爽。/* Clear Fix */

.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显⽰}16.

⾼度不适应⾼度不适应是当内层对象的⾼度发⽣变化时外层⾼度不能⾃动进⾏调节，特别是当内层对象使⽤margin 或padding时。例： #box {background-color:#eee; }

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

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

IE6下图⽚下有空隙产⽣解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决.18.

对齐⽂本与⽂本输⼊框加上vertical-align:middle;经验证，在IE下任⼀版本都不适⽤，⽽ff、opera、safari、chrome均OK！19.

LI中内容超过长度后以省略号显⽰此技巧适⽤与IE、Opera、safari、chrom浏览器，FF暂不⽀持。20.

为什么web标准中IE⽆法设置滚动条颜⾊了解决办法是将body换成html24.

FORM标签这个标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0,因此,如果想显⽰⼀致,所以最好在css中指定margin和 padding,针对上⾯两个问题,我的css中⼀般⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}。25.

属性选择器(这个不能算是兼容,是隐藏css的⼀个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作⽤.属性选择器和⼦选择器还是有区别的,⼦选择器的范围从形式来说缩⼩了,属性选择器的范围⽐较⼤,如p[id]中,所有p标签中有id的都是同样式的.26.

为什么FF下⽂本⽆法撑开容器的⾼度标准浏览器中固定⾼度值的容器是不会象IE6⾥那样被撑开的,那我⼜想固定⾼度,⼜想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这⾥为了照顾不认识min-height的IE6 可以这样定义:{

height:auto!important;

height:200px;

min-height:200px;

}

2023年6月21日发(作者：)

前端常见的浏览器兼容性问题及解决⽅案⼀、常见的浏览器内核：常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器： Trident内核，也成为IE内核Chrome浏览器： Webkit内核，现在是Blink内核Firefox浏览器： Gecko内核，俗称Firefox内核Safari浏览器： Webkit内核Opera浏览器： 最初是⾃⼰的Presto内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核；360浏览器： IE+Chrome双内核猎豹浏览器： IE+Chrome双内核百度浏览器： IE内核QQ浏览器： Trident（兼容模式）+Webkit（⾼速模式）⼆、常见的兼容性问题：1.

cursor:hand VS cursor:pointerfirefox不⽀持hand，但ie⽀持pointer解决⽅法: 统⼀使⽤pointer2.

innerText在IE中能正常⼯作，但在FireFox中却不⾏.

需⽤textContent。解决⽅法:if(f("Explorer") > -1){ mentById('element').innerText = "my text";} else{ mentById('element').textContent = "my text";}3.

CSS透明IE：filter:progid:(style=0,opacity=60)。FF：opacity:0.6。4.

css中的width和padding在IE7和FF中width宽度不包括padding，在Ie6中包括padding.5.

FF和IEBOX模型解释不⼀致导致相差{width:100;border1px;}ie理解为 =100ff理解为 =100 + 1*2 = 102 //加上边框2px解决⽅法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序⼀定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;6.

IE5 和IE6的BOX解释不⼀致IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}7.

ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空⽩以及列表编号或圆点，设置padding对样式没有影响；在 Firefox中，设置margin:0px仅仅可以去除上下的空⽩，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，⽽在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。8.

元素⽔平居中问题FF: margin:0auto;IE: ⽗级{ text-align:center; }9.

Div的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼：line-height:200px;然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏。10.

margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;例如：相应的css为#imfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}11.

IE与宽度和⾼度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。⽐如要设置背景图⽚，这个宽度是⽐较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}12.

页⾯的最⼩宽度如上⼀个问题，IE不识别min，要实现最⼩宽度，可⽤下⾯的⽅法：#container{ min-width: 600px;width:expression(Width＜ 600? "600px": "auto" );}第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。13.

DIV浮动IE⽂本产⽣3象素的bug左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距. #box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}