浏览器兼容性问题解决方案汇总

2017-10-12  本文已影响0人  G_whk

解决 ie9 以下浏览器对 html5 新增标签不识别的问题

<!--[if lt IE 9]>

<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"> 

</script>

<![endif]-->

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">

</script>

解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js">

</script>

a 标签的几种 CSS 状态的顺序

link:平常的状态
visited:被访问过之后
hover:鼠标放到链接上的时候
active:链接被按下的时候

完美解决 Placeholder

<input type="text" value="Name *" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Name *';}">

IE6 双倍边距的问题

display: inline;

解决 IE9 以下浏览器不能使用 opacity

opacity: 0.5; 

filter: alpha(opacity = 50); 

filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 50);

解决 IE6 不支持 fixed 绝对定位以及IE6 下被绝对定位的元素在滚动的时候会闪动的问题

/* IE6 hack */

*html, *html body {

background-image: url(about:blank);

background-attachment: fixed; 

} 

*html #menu {

position: absolute;

top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px');

 }

IE6 背景闪烁的问题

问题:链接、按钮用 CSSsprites 作为背景,在 ie6 下会有背景图闪烁的现象。原因是 IE6 没有将背景图缓存,每次触发 hover 的时候都会重新加载

解决:可以用 JavaScript 设置 ie6 缓存这些图片:

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

解决在 IE6 下,列表与日期错位的问题

日期<span> 标签放在标题 <a> 标签之前即可


解决 IE6 不支持 min-height 属性的问题

min-height: 350px; _height: 350px;

键盘事件 keyCode 兼容性写法

var inp = document.getElementById('inp') 

var result = document.getElementById('result')

function getKeyCode(e) { 

e = e ? e : (window.event ? window.event : "")

      return e.keyCode ? e.keyCode : e.which 

}

 inp.onkeypress = function(e) { 

      result.innerHTML = getKeyCode(e) 

}

求窗口大小的兼容写法

// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)

// 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;

DOM 事件处理程序的兼容写法

var eventshiv = {

 // event兼容 

getEvent: function(event) 

{return event ? event : window.event; 

},

 // type兼容 

getType: function(event) {

return event.type; 

}, 

 // target兼容 

getTarget: function(event) {

return event.target ? event.target : event.srcelem; 

}, 

 // 添加事件句柄 

addHandler: function(elem, type, listener) {

if (elem.addEventListener) { 

elem.addEventListener(type, listener, false); 

} 

else if (elem.attachEvent) {

 elem.attachEvent('on' + type, listener); 

} 

else { 

// 在这里由于.与'on'字符串不能链接,只能用 [] 

elem['on' + type] = listener;

 }

 },

 // 移除事件句柄 

removeHandler: function(elem, type, listener) {

if (elem.removeEventListener) { 

elem.removeEventListener(type, listener, false); 

} 

else if (elem.detachEvent) {

 elem.detachEvent('on' + type, listener); 

} 

else { 

elem['on' + type] = null;

 } 

}, 

 // 添加事件代理 

addAgent: function (elem, type, agent, listener) { 

elem.addEventListener(type, function (e) {

if (e.target.matches(agent)) {

 listener.call(e.target, e); // this 指向 e.target 

}

});

 }, 

 // 取消默认行为 

preventDefault: function(event) {

if (event.preventDefault) { 

event.preventDefault(); } 

else { 

event.returnValue = false; 

} 

}, 

 // 阻止事件冒泡 

stopPropagation: function(event) {

if (event.stopPropagation) { 

event.stopPropagation(); 

}

 else { 

event.cancelBubble = true; 

} 

} 

};
上一篇下一篇

猜你喜欢

热点阅读