失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 常见浏览器兼容性问题和解决方案

常见浏览器兼容性问题和解决方案

时间:2023-02-02 06:00:29

相关推荐

常见浏览器兼容性问题和解决方案

持续更新~

常见的浏览器IE、Firefox、Chrome等主流浏览器兼容性问题和解决方案:

1,各浏览器默认的margin/padding值不同

解决方案:共通css里头部加上* {margin: 0; padding: 0;}

2,块级元素设置display: inline-block;时在某些浏览器两个元素之间会有小间隙

解决方案:可以在父元素样式里加上font-size:0;然后子元素加上各自的font-size设置;或者可以使用float布局

3,设置的高度小于浏览器默认高度时显示不正常

解决方案:设置样式overflow: hidden;或者设置line-height小于设置的高度

4,透明度设置

.halfTrans {filter: alpha(opacity=50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);-moz-opacity: 0.5;-khtml-opacity: 0.5;opacity: 0.5;}

5,两个兄弟元素都设置了margin,最终呈现效果是使用较大的margin而不是二者相加

解决方案:可以给子元素增加一个父级元素样式设置overflow: hidden;这样两个本来的兄弟元素就不相邻了,margin也能正常显示了

6,键盘事件keyCode兼容性写法

var myInput = document.getElementById('myInput');myInput.onkeypress = function(e) {e = e ? e : (window.event ? window.event : "");var code = e.keyCode ? e.keyCode : e.which;console.log(code);}

7,获取宽高的兼容性写法

// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)var client_w = document.documentElement.clientWidth || document.body.clientWidth;var client_h = document.documentElement.clientHeight || document.body.clientHeight;// 网页内容实际宽高(包括工具栏和滚动条等边线)var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;// 网页内容实际宽高 (不包括工具栏和滚动条等边线)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;

8,取消事件默认行为

// 比如标签a的默认点击行为是跳转,如果点击事件里加了阻止默认,它就不跳转了// 三种方式event.preventDefault(); // w3c标准return false; // w3c标准window.event.returnValue = false; // 很旧的IE

9,阻止事件冒泡

event.stopPropagation(); // w3c标准event.cancelBubble = true; // IE

10,禁止选取网页内容

IE: obj.onselectstart = function() {return false;}FF: -moz-user-select:none;

如果觉得《常见浏览器兼容性问题和解决方案》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。