我所碰到的⾯试题之------前端常见浏览器兼容性问题解决⽅案---
不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。
浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核：
不同浏览器的默认样式存在差异，可以使⽤Normalize.css抹平这些差异。
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。因为优先级相同且想冲突的属性设置后⼀个会覆盖掉前⼀个，所以书写的次序是很重要的。
8.IE6双边距问题：在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题
解决⽅案：设置display:inline;
9.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度
解决⽅案：超出⾼度的标签设置overflow:hidden，或者设置line-height的值⼩于你的设置⾼度
10.图⽚默认有间距
解决⽅案：使⽤float 为img 布局
11.IE9以下浏览器不能使⽤opacity
解决⽅案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opa
city = 50);
12.边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；
解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；
13.cursor:hand 显⽰⼿型在safari 上不⽀持
解决⽅案：统⼀使⽤ cursor:pointer
14.两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ；且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；
解决⽅案：⽗级元素设置position:relative
15.IE6 背景闪烁的问题
问题：链接、按钮⽤CSSsprites作为背景，在ie6下会有背景图闪烁的现象。原因是IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：可以⽤JavaScript设置ie6缓存这些图⽚：
16.解决在 IE6 下，列表与⽇期错位的问题
⽇期<span>标签放在标题<a>标签之前即可
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/37.png');
background-repeat: no-repeat;
background-size: cover;
-ms-behavior: url('css/backgroundsize.min.htc');
behavior: url('css/backgroundsize.min.htc');
}
19.IE6-7 line-height失效的问题
问题：在ie中img与⽂字放⼀起时，line-height不起作⽤
解决：都设置成float
width:100%
width:100%这个东西在ie⾥⽤很⽅便，会向上逐层搜索width值，忽视浮动层的影响. Firefox下搜索⾄浮动层结束，如此，只能给中间的所有浮动层加width:100%才⾏，累啊。opera这点倒学乖了，跟了ie
cursor:hand
显⽰⼿型cursor: hand，ie6/7/8、opera 都⽀持，但是safari 、 ff 不⽀持
cursor: pointer;
20.td ⾃动换⾏的问题
问题：table宽度固定，td⾃动换⾏
解决：设置Table为table-layout: fixed，td为word-wrap: break-word
21.让层显⽰在FLASH之上
想让层的内容显⽰在 flash 上，把 FLASH 设置透明即可
1、<param name=" wmode " value="transparent" />
2、<param name="wmode" value="opaque"/>
22.键盘事件keyCode兼容性写法
var inp = ElementById('inp')
var result = ElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
result.innerHTML = getKeyCode(e)
}
23.求窗⼝⼤⼩的兼容写法
// 浏览器窗⼝可视区域⼤⼩（不包括⼯具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;
// ⽹页内容实际宽⾼（包括⼯具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
// ⽹页内容实际宽⾼ (不包括⼯具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
// 滚动的⾼度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
24.DOM 事件处理程序的兼容写法
var eventshiv = {
// event兼容
getEvent: function(event) {
return event ? event : window.event;
},
// <span class="hljs-built_in">type</span>兼容
getType: <span class="hljs-keyword">function</span>(event) {
css去掉滚动条<span class="hljs-built_in">return</span> pe;
},
// target兼容
getTarget: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-built_in">return</span> event.target ? event.target : event.srcelem;
},
/
/ 添加事件句柄
addHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
<span class="hljs-keyword">if</span> (elem.addEventListener) {
elem.addEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.attachEvent) {
elem.attachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
} <span class="hljs-keyword">else</span> {
// 在这⾥由于.与<span class="hljs-string">'on'</span>字符串不能链接，只能⽤ []
elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = listener;
}
},
// 移除事件句柄
removeHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) {
<span class="hljs-keyword">if</span> (veEventListener) {
elem.detachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
} <span class="hljs-keyword">else</span> {
elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = null;
}
},
// 添加事件代理
addAgent: <span class="hljs-keyword">function</span> (elem, <span class="hljs-built_in">type</span>, agent, listener) { elem.addEventListener(<span class="hljs-built_in">type</span>, <span class="hljs-keyword">function</span> (e) {
<span class="hljs-keyword">if</span> (e.target.matches(agent)) {
listener.call(e.target, e); // this 指向 e.target
}
});
},
// 取消默认⾏为
preventDefault: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-keyword">if</span> (event.preventDefault) {
event.preventDefault();
} <span class="hljs-keyword">else</span> {
}
},
// 阻⽌事件冒泡
stopPropagation: <span class="hljs-keyword">function</span>(event) {
<span class="hljs-keyword">if</span> (event.stopPropagation) {
event.stopPropagation();
} <span class="hljs-keyword">else</span> {
event.cancelBubble = <span class="hljs-literal">true</span>;
}
};
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论