2023年6月21日发(作者：)
我所碰到的⾯试题之------前端常见浏览器兼容性问题解决⽅案---
不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：不同浏览器的默认样式存在差异，可以使⽤
抹平这些差异。1.不同浏览器的标签默认的margin和padding不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。
2.块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤问题症状:常见症状是IE6中后⾯的⼀块被顶到下⼀⾏碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。
3.设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度碰到频率：60%解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。
4.⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug问题症状：IE6⾥的间距⽐超过设置的间距碰到⼏率：20%解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。在⽤float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本⾝就是⾏内属性标签，所以我们再加上display:inline的话，它的⾼宽就不可设了。这时候我们还需要在display:inline后⾯加⼊display:talbe。
5.图⽚默认有间距问题症状：⼏个img标签放在⼀起的时候，有些浏览器会有默认的间距，加了问题⼀中提到的通配符也不起作⽤。碰到⼏率：20%解决⽅案：使⽤float属性为img布局备注：因为img标签是⾏内属性标签，所以只要不超出容器宽度，img标签都会排在⼀⾏⾥，但是部分浏览器的img标签之间会有个间距。去掉这个间距使⽤float是正道。（我的⼀个学⽣使⽤负margin，虽然能解决，但负margin本⾝就是容易引起浏览器兼容问题的⽤法，所以我禁⽌他们使⽤）
6.标签最低⾼度设置min-height不兼容问题症状：因为min-height本⾝就是⼀个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到⼏率：5%解决⽅案：如果我们要设置⼀个标签的最⼩⾼度200px，需要进⾏的设置为：{min-height:200px; height:auto !important; height:200px;overflow:visible;}备注：在B/S系统前端开时，有很多情况下我们⼜这种需求。当内容⼩于⼀个值（如300px）时。容器的⾼度为300px；当内容⾼度⼤于这个值时，容器⾼度被撑⾼，⽽不是出现滚动条。这时候我们就会⾯临这个兼容性问题。
7.透明度的兼容CSS设置
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。◆IE6认识的hacker 是下划线_ 和星号 *◆IE7 遨游认识的hacker是星号 *⽐如这样⼀个CSS设置：height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，IE6还认识_height,所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；IE7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把⾼度解析为200px，剩下的浏览器只认识第⼀个height:300px;所以他们会把⾼度解析为300px。因为优先级相同且想冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。
6双边距问题:在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline; 9.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度
10.图⽚默认有间距解决⽅案：使⽤float 为img 布局
9以下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);
12.边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；
:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer
14.两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative
6 背景闪烁的问题问题：链接、按钮⽤
CSSsprites 作为背景，在
ie6 下会有背景图闪烁的现象。原因是
IE6 没有将背景图缓存，每次触发
hover 的时候都会重新加载解决：可以⽤
JavaScript 设置
ie6 缓存这些图⽚：mmand("BackgroundImageCache", false, true);
16.解决在 IE6 下，列表与⽇期错位的问题⽇期 标签放在标题
17.解决
IE6 不⽀持
min-height 属性的问题min-height: 350px;_height: 350px;
18.让
IE7 IE8 ⽀持
CSS3 background-size属性由于 background-size 是 CSS3 新增的属性，所以 IE 低版本⾃然就不⽀持了，但是⽼外写了⼀个 htc ⽂件，名叫 ，使⽤该⽂件能够让IE7、IE8 ⽀持 background-size 属性。其原理是创建⼀个 img 元素插⼊到容器中，并重新计算宽度、⾼度、left、top 等值，模拟background-size 的效果。html { height: 100%;}body { height: 100%; margin: 0; padding: 0; background-image: url('img/'); background-repeat: no-repeat; background-size: cover; -ms-behavior: url('css/'); behavior: url('css/');}
6-7
line-height 失效的问题问题：在ie 中
img 与⽂字放⼀起时，line-height 不起作⽤解决：都设置成
floatwidth:100%width:100% 这个东西在
ie ⾥⽤很⽅便，会向上逐层搜索
width 值，忽视浮动层的影响.Firefox 下搜索⾄浮动层结束，如此，只能给中间的所有浮动层加
width:100%才⾏，累啊。opera 这点倒学乖了，跟了
iecursor:hand显⽰⼿型
cursor: hand，ie6/7/8、opera 都⽀持，但是safari 、 ff 不⽀持cursor: pointer; ⾃动换⾏的问题问题：table 宽度固定，td ⾃动换⾏解决：设置
Table 为
table-layout: fixed，td 为
word-wrap: break-word
21.让层显⽰在
FLASH 之上想让层的内容显⽰在 flash 上，把 FLASH 设置透明即可1、2、22.键盘事件
keyCode 兼容性写法var inp = mentById('inp')var result = mentById('result')function getKeyCode(e) { e = e ? e : ( ? : "") return e ? e : }ress = function(e) { TML = getKeyCode(e)}
23.求窗⼝⼤⼩的兼容写法// 浏览器窗⼝可视区域⼤⼩（不包括⼯具栏和滚动条等边线）// 1600 * 525var client_w = Width || Width;var client_h = Height || Height;// ⽹页内容实际宽⾼（包括⼯具栏和滚动条等边线）// 1600 * 8var scroll_w = Width || Width;var scroll_h = Height || Height;// ⽹页内容实际宽⾼ (不包括⼯具栏和滚动条等边线）// 1600 * 8var offset_w = Width || Width;var offset_h = Height || Height;// 滚动的⾼度var scroll_Top = Top||Top;
事件处理程序的兼容写法var eventshiv = { // event兼容 getEvent: function(event) { return event ? event : ; },// type兼容getType: function(event) { return ;},// target兼容getTarget: function(event) { return ? : m;},// 添加事件句柄addHandler: function(elem, type, listener) { if (ntListener) { ntListener(type, listener, false); } else if (Event) { Event('on' + type, listener); } else { // 在这⾥由于.与'on'字符串不能链接，只能⽤ [] elem['on' + type] = listener; }},// 移除事件句柄removeHandler: function(elem, type, listener) { if (EventListener) { EventListener(type, listener, false); } else if (Event) { Event('on' + type, listener); } else { elem['on' + type] = null; }},// 添加事件代理addAgent: function (elem, type, agent, listener) { ntListener(type, function (e) { if (s(agent)) { (, e); // this 指向 } });},// 取消默认⾏为preventDefault: function(event) { if (tDefault) { tDefault(); } else { Value = false; }},// 阻⽌事件冒泡stopPropagation: function(event) { if (opagation) { opagation(); } else { Bubble = true; }};
2023年6月21日发(作者：)
我所碰到的⾯试题之------前端常见浏览器兼容性问题解决⽅案---
不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：不同浏览器的默认样式存在差异，可以使⽤
抹平这些差异。1.不同浏览器的标签默认的margin和padding不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。
2.块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤问题症状:常见症状是IE6中后⾯的⼀块被顶到下⼀⾏碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。
3.设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度碰到频率：60%解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。
4.⾏内属性标签，设置display:block后采⽤float布局，⼜有横⾏的margin的情况，IE6间距bug问题症状：IE6⾥的间距⽐超过设置的间距碰到⼏率：20%解决⽅案：在display:block;后⾯加⼊display:inline;display:table;备注：⾏内属性标签，为了设置宽⾼，我们需要设置display:block;(除了input标签⽐较特殊)。在⽤float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本⾝就是⾏内属性标签，所以我们再加上display:inline的话，它的⾼宽就不可设了。这时候我们还需要在display:inline后⾯加⼊display:talbe。
5.图⽚默认有间距问题症状：⼏个img标签放在⼀起的时候，有些浏览器会有默认的间距，加了问题⼀中提到的通配符也不起作⽤。碰到⼏率：20%解决⽅案：使⽤float属性为img布局备注：因为img标签是⾏内属性标签，所以只要不超出容器宽度，img标签都会排在⼀⾏⾥，但是部分浏览器的img标签之间会有个间距。去掉这个间距使⽤float是正道。（我的⼀个学⽣使⽤负margin，虽然能解决，但负margin本⾝就是容易引起浏览器兼容问题的⽤法，所以我禁⽌他们使⽤）
6.标签最低⾼度设置min-height不兼容问题症状：因为min-height本⾝就是⼀个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容碰到⼏率：5%解决⽅案：如果我们要设置⼀个标签的最⼩⾼度200px，需要进⾏的设置为：{min-height:200px; height:auto !important; height:200px;overflow:visible;}备注：在B/S系统前端开时，有很多情况下我们⼜这种需求。当内容⼩于⼀个值（如300px）时。容器的⾼度为300px；当内容⾼度⼤于这个值时，容器⾼度被撑⾼，⽽不是出现滚动条。这时候我们就会⾯临这个兼容性问题。
7.透明度的兼容CSS设置
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。◆IE6认识的hacker 是下划线_ 和星号 *◆IE7 遨游认识的hacker是星号 *⽐如这样⼀个CSS设置：height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为⾼时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前⼀条的相冲突设置，认为⾼度是200px。继续往下读，IE6还认识_height,所以他⼜会覆盖掉200px⾼的设置，把⾼度设置为100px；IE7和遨游也是⼀样的从⾼度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把⾼度解析为200px，剩下的浏览器只认识第⼀个height:300px;所以他们会把⾼度解析为300px。因为优先级相同且想冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。
6双边距问题:在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline; 9.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度
10.图⽚默认有间距解决⽅案：使⽤float 为img 布局
9以下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);
12.边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；
:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer
14.两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative
6 背景闪烁的问题问题：链接、按钮⽤
CSSsprites 作为背景，在
ie6 下会有背景图闪烁的现象。原因是
IE6 没有将背景图缓存，每次触发
hover 的时候都会重新加载解决：可以⽤
JavaScript 设置
ie6 缓存这些图⽚：mmand("BackgroundImageCache", false, true);
16.解决在 IE6 下，列表与⽇期错位的问题⽇期 标签放在标题
17.解决
IE6 不⽀持
min-height 属性的问题min-height: 350px;_height: 350px;
18.让
IE7 IE8 ⽀持
CSS3 background-size属性由于 background-size 是 CSS3 新增的属性，所以 IE 低版本⾃然就不⽀持了，但是⽼外写了⼀个 htc ⽂件，名叫 ，使⽤该⽂件能够让IE7、IE8 ⽀持 background-size 属性。其原理是创建⼀个 img 元素插⼊到容器中，并重新计算宽度、⾼度、left、top 等值，模拟background-size 的效果。html { height: 100%;}body { height: 100%; margin: 0; padding: 0; background-image: url('img/'); background-repeat: no-repeat; background-size: cover; -ms-behavior: url('css/'); behavior: url('css/');}
6-7
line-height 失效的问题问题：在ie 中
img 与⽂字放⼀起时，line-height 不起作⽤解决：都设置成
floatwidth:100%width:100% 这个东西在
ie ⾥⽤很⽅便，会向上逐层搜索
width 值，忽视浮动层的影响.Firefox 下搜索⾄浮动层结束，如此，只能给中间的所有浮动层加
width:100%才⾏，累啊。opera 这点倒学乖了，跟了
iecursor:hand显⽰⼿型
cursor: hand，ie6/7/8、opera 都⽀持，但是safari 、 ff 不⽀持cursor: pointer; ⾃动换⾏的问题问题：table 宽度固定，td ⾃动换⾏解决：设置
Table 为
table-layout: fixed，td 为
word-wrap: break-word
21.让层显⽰在
FLASH 之上想让层的内容显⽰在 flash 上，把 FLASH 设置透明即可1、2、22.键盘事件
keyCode 兼容性写法var inp = mentById('inp')var result = mentById('result')function getKeyCode(e) { e = e ? e : ( ? : "") return e ? e : }ress = function(e) { TML = getKeyCode(e)}
23.求窗⼝⼤⼩的兼容写法// 浏览器窗⼝可视区域⼤⼩（不包括⼯具栏和滚动条等边线）// 1600 * 525var client_w = Width || Width;var client_h = Height || Height;// ⽹页内容实际宽⾼（包括⼯具栏和滚动条等边线）// 1600 * 8var scroll_w = Width || Width;var scroll_h = Height || Height;// ⽹页内容实际宽⾼ (不包括⼯具栏和滚动条等边线）// 1600 * 8var offset_w = Width || Width;var offset_h = Height || Height;// 滚动的⾼度var scroll_Top = Top||Top;
事件处理程序的兼容写法var eventshiv = { // event兼容 getEvent: function(event) { return event ? event : ; },// type兼容getType: function(event) { return ;},// target兼容getTarget: function(event) { return ? : m;},// 添加事件句柄addHandler: function(elem, type, listener) { if (ntListener) { ntListener(type, listener, false); } else if (Event) { Event('on' + type, listener); } else { // 在这⾥由于.与'on'字符串不能链接，只能⽤ [] elem['on' + type] = listener; }},// 移除事件句柄removeHandler: function(elem, type, listener) { if (EventListener) { EventListener(type, listener, false); } else if (Event) { Event('on' + type, listener); } else { elem['on' + type] = null; }},// 添加事件代理addAgent: function (elem, type, agent, listener) { ntListener(type, function (e) { if (s(agent)) { (, e); // this 指向 } });},// 取消默认⾏为preventDefault: function(event) { if (tDefault) { tDefault(); } else { Value = false; }},// 阻⽌事件冒泡stopPropagation: function(event) { if (opagation) { opagation(); } else { Bubble = true; }};
![f12html选择标准,浅谈浏览器兼容性模式[按F12便知]](/uploads/image/0820.jpg)
发布评论