一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第10天,点击查看活动详情。
不同浏览器的内核不尽相同,所以各个浏览器对页面的解析存在一定的差异。 浏览器内核主要分为两种:一是渲染引擎,另一个是js引擎
所以浏览器兼容性问题一般指:Css兼容和Js兼容
一、Css兼容
1.不同浏览器的标签默认的margin和padding不同
**问题症状:**随便写几个标签,不加样式控制的情况下,各自的margin和padding差异比较大
碰到频率: 100%
解决方案:
1.Css里面写*{margin:0,padding:0},但是性能不好
2.一般我们会引入reset.css样式重置
备注: 这个是最常见的也是最容易解决的一个浏览器兼容性问题,所有的CSS文件开头都会用样式重置各个标签的内外补丁是0.
2.Css3新属性,加浏览器前缀兼容早期浏览器
-moz- 火狐浏览器 -webkit- Safari,谷歌浏览器等使用Webkit引擎 -o- Opera浏览器(早期) -ms- IE
那些Css3属性需要加前缀:
1.定义关键帧动画@keyframes
2.css3中的变形(transform)、过渡(transtion)、动画(animation)
3.border-radius 圆角
boder-radius:3px; /*圆角,水平半径为3px*/
-moz-border-radius:3-x; /*Firefox浏览器*/
-webkit-boder-radius:3px; /*WebKit核心浏览器*/
-o-border-radius:3px; /*Opera浏览器*/
4.box-shadow 盒子阴影
5.flex 弹性布局
6.==IE浏览器使用滤镜实现== filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50) ==
非IE浏览器== opacity:0.5
7. 在chrome下,小于12px的文本字体都默认为12px显示
解决方法:用 css3 解决这个问题
div{ font-size: 10px; -webkit-transform: scale(0.75);}
。。。。。
实例
.myContain {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
3.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置的高度
问题特征: 设置div高度小于10px,IE6、IE7和遨游里div的高度,超出自己设置的10px。
碰到频率: 60%
解决方案:
1.给超出高度的标签设置overflow:hidden
2.或者设置行高line-height 小于你设置的高度
备注: 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。
4.IE浏览器div最小宽度和高度的问题
问题症状: IE浏览器div最小宽度和高度不生效
IE不认得min-这个定义,但实际上它把正常的width和height当作了min的情况来使,这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个最小宽度是比较重要的。要解决这个问题,可以这样:
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
5.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:link-visited-hover-active
a:link:{}
a:visited{}
a:hover{}
a:active{}
6.图片默认有间距
问题症状: 几个img标签放在一起的时候,有些浏览器会默认的间距,通配符清除间距也不起作用。
碰到频率: 20%
解决方案: 使用float属性为img布局(所有图片左浮动)
备注: 因为img标签是行内元素,所以只要不超出容器的宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距,去掉这个间距使用float是正道。
7.边距重叠问题
边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
二、Js兼容
1.事件绑定:
IE: dom.attachEvent();
标准浏览器: dom.addEventListener(‘click’,function(event){},false);
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元
素) 最后标准方觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的
由来,而且事件冒泡作为了默认值第三值默认false,表示事件冒泡方式。
如果浏览器不支持addEventListener()方法,你可以使用attachEvent()方法替代。
以下实例演示了跨浏览器的解决方法:
var x = document.getElementById('myBtn');
if(x.addEventListener){
x.addEventListener('click',myFunction);
} else if (x.attachEvent){
x.attachEvent('onclick',myFunction)
}
2. 阻止事件冒泡传播:
/js阻止事件传播,这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
3. 阻止事件默认行为:
//js阻止默认事件 一般阻止a链接href,form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
4.event事件对象问题:
document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持,火狐不支持;
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
5.阻止事件默认行为:
//js阻止默认事件 一般阻止a链接href,form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
6.ajax兼容问题:
IE:ActiveXObject
其他: xmlHttpReuest:
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};