IE8浏览器兼容问题(日常经验总结)

  1. ie8对待颜色值,最完整的就是 #ffffff 6位16进制数,三位也支持,但是4位就不支持了。所以以后在书写颜色值代码最好都写全了,防止不必要的bug,加班。。。。
  2. module.exports 与export 区别:exports 与require 相匹配(ES5的用法) export 与 import匹配,是ES6的语法。
  3. IE8的background属性支持,但是不支持background-size属性不支持,ie9以上才支持。解决办法是使用 filter:属性(ie8),但是图片的路径必须写成绝对路径。
  4. 自定义组件,webpack。同时支持模块require引用,也支持script js 单独文件引用:同时加上exports 和 window.*** 挂载到window上就可以被script标签引用。webpack打包,js es6语法转es5语法.
  5. “” null undefined 区别 (!非这三种都是true)
  6. 如果页面交互很多,需要操作dom很多的情况,可以考虑把操作dom的逻辑写到一个单独的逻辑,并且把ID名的dom用一个变量保持,这样可以防止html页面id名称改变,只需要改一次名字就可了,同时分开文件也是为了让业务逻辑更清晰,大段落的交互逻辑会影响逻辑代码的阅读性。
  7. 按钮交互高亮和置灰操作写到一个类中,通过切换类来做交互
  8. 一个盒子垂直居中新遇到的比较好用的方法:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .father{
            position:relative;
            width: 500px;
            height:500px;
            background: pink;
        }
        .child{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            display: block;
            width: 362px;
            height: 278px;
            background: red;
        }

    </style>
  </head>
  <body>
    <div class="father">
        <div class="child"></div>
    </div>
  </body>
</html>

同样这个方法和 top:50%;left:50%;transform:translate(-50%,-50%);一样都比较好用。但是对待IE8使用上面的方法,不会有兼容问题,第二种方式使用了css3的语法。
9. 对于需要调用别人的接口,我们在回调函数中做业务逻辑处理的,可以自己模拟接口返回的数据,封装成一个文件,然后自己测试书写代码。
10. 对于一个网站上的地址向另外一个网站上传递参数,为了防止在传递的过程中被截获传递的信息,可以对传递的参数或者网站的登录密码做一个base64加密处理再传递。本次使用了插件js-base64 https://www.npmjs.com/package/js-base64
11. 兼容IE 浏览器的项目中,会碰到要禁用input,textarea中的backspace按钮。是为了防止:在浏览器空白处或者不可编辑的input框上,点击【Backspace】按键,出现浏览器页面回退的问题,经过测试,发现谷歌浏览器默认屏蔽了这个回退的功能,但IE、360浏览器、火狐浏览器都没有,这个功能会导致,特别是后台系统,session丢失,退回到登录页面,严重影响用户体验。
比如,用户在进行表单的信息填写,不经意在浏览器空白处点击了【Backspace】按键,退到了登录界面,想想这是个什么样的体验。

function banBackSpace(e) {
		var ev = e || window.event;
		//各种浏览器下获取事件对象
		var obj = ev.relatedTarget || ev.srcElement || ev.target || ev.currentTarget;
		//按下Backspace键
		if (ev.keyCode == 8) {
			var tagName = obj.nodeName //标签名称
			//如果标签不是input或者textarea则阻止Backspace
			if (tagName != 'INPUT' && tagName != 'TEXTAREA') {
				return stopIt(ev);
			}
			var tagType = obj.type.toUpperCase();//标签类型
			//input标签除了下面几种类型,全部阻止Backspace
			if (tagName == 'INPUT' && (tagType != 'TEXT' && tagType != 'TEXTAREA' && tagType != 'PASSWORD')) {
				return stopIt(ev);
			}
			//input或者textarea输入框如果不可编辑则阻止Backspace
			if ((tagName == 'INPUT' || tagName == 'TEXTAREA') && (obj.readOnly == true || obj.disabled == true)) {
				return stopIt(ev);
			}
		}
	}
	function stopIt(ev) {
		if (ev.preventDefault) {
			//preventDefault()方法阻止元素发生默认的行为
			ev.preventDefault();
		}
		if (ev.returnValue) {
			//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
			ev.returnValue = false;
		}
		return false;
	}
 
	$(function() {
		//实现对字符码的截获,keypress中屏蔽了这些功能按键
		document.onkeypress = banBackSpace;
		//对功能按键的获取
		document.onkeydown = banBackSpace;
	})

参考文章:https://blog.csdn.net/csdn_ds/article/details/73337929
12.overflow-x和 overflow-y混合使用会出现问题:

  • 如果其中一个特性值被设置成了 ‘scroll’ 或 ‘auto’,而另一个特性指定值为 ‘visible’,那么 ‘visible’ 会被设置成 ‘auto’。
  • 当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’,另一个特性的指定值为 ‘visible’ 时, 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’,其它浏览器使用 ‘auto’。
  • 解决办法就是就尽量不要scroll和visible同时使用
    13.监听DOM的变化(不是vue项目不能使用监听器)可以使用MutationObserver。具体看下面的博客。(ie11+才支持此方法)
    https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

Object.defineProperty 添加监听

IE浏览器不支持 Object.defineProperty。ie上写了先提醒缺少参数或者某个参数不能为false,然后去掉对应的参数就会显示不支持 Object.defineProperty 这是因为,IE浏览器有支持 Object.defineProperty ,但是值允许在操作DOM时使用,对于和vue中对于某个变量进行监听是不支持的。在网上找了一个 工具文件 ,地址是:https://gitee.com/ambit/object-defineproperty-ie ,使用之后确实在IE中不报错了,但是依然不能够监听一个变量,只能手动对IE浏览器做处理,使用JS判断当前浏览器版本及浏览器做相应的处理。
Object.defineProperty 使用方法:
在这里插入图片描述

记得后面一定要 调用:_pbj.data = number 及 number值就是我们要监听的值。

placeHoder问题

ie 浏览器不支持placeHoder属性,因为这是H5 的属性。
解决方法:

  • 自己手动写对应的,把它当做input框的value值来写。
  • 百度找了一个兼容IE浏览器的placeHolder属性的文件,直接引入:

但是本次的需求是,Input框获取焦点的的时候,提示文字消失,失去焦点,提示文字显示:

var onFocus = function ($el, text) {
	if ($el.val() == text) {
		$el.val("");
	}
}
var onBlur = function ($el, text) {
	if ($el.val() == ") {
		$el.val(text);
	}
};

iframe标签IE下总是出现滚动条问题:

iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条。
解决方案:

  1. 父级div设置 font-size:0; .(子级里面是iframe)
  2. iframe标签添加css属性 display:block; (使用此方法解决)
  3. iframe标签添加css属性 vertical-aglin:top;

问题出现原因:
iframe=inline frame它是一个内联元素,默认是跟baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。
找到原因了,解决方案也就简单了。
第一种,设置iframe的vertical-align:top
第二种,设置父div的font-size:0,从而影响空白节点的line-height是0,从而不占据高度。
第三种,改变iframe的内联元素性质,改为块级元素,display:block

后续问题
行内元素带来空白节点,也带来inline-block 空白节点问题。
上述解释有点笼统,关于line-height和vertical-align(top、baseline)的详细功能,还得继续研究。

参考
http://stackoverflow.com/questions/9129182/iframe-100-height-causes-vertical-scrollbar
http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
http://www.cnblogs.com/dolphinX/p/3236686.html

注册事件(on/addEventListener)

on :用on来注册事件,这是jQuery的语法。使用on 来注册事件不需要考虑浏览器兼容问题。
addEventListener:是原生js,用来注册事件(区分 onclick和 ‘click’)

语法
HTML:

<element onclick="SomeJavaScriptCode">
JavaScript 中:

object.onclick=function(){SomeJavaScriptCode};

addEventListener事件:

element.addEventListener(event, function, useCapture)
/*
event	必须。字符串,指定事件名。注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
*/

如果使用 addEventListener事件,兼容方法:

if(typeof window.addEventListener != 'undefined'){//ie9+
	window.addEventListener('message',notifyFun,false);//第三个参数true表示:true - 事件句柄在捕获阶段执行  false- false- 默认。事件句柄在冒泡阶段执行
}else if(typeof window.attachEvent != 'undefined'){//只支持IE678,不兼容其他浏览器
	window.attachEvent('onmessage',notifyFun);//是注册事件,不是解绑事件(解绑unbind)
}//注意点:attachEvent方法绑定的事件是带on的,addEventListener绑定的事件是不带on的

终极解决方案:

function addEvent(str,ele,fn){
      ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
}
function fn(){
   console.log("lalala");
}
var div=document.getElementsByTagName("div")[0];
addEvent('click',div,fn)

onmessage:该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

想要成仙的菜鸟前端

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值