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

持续更新~

常见的浏览器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;
展开阅读全文

Windows版YOLOv4目标检测实战:训练自己的数据集

04-26
©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值