zoukankan      html  css  js  c++  java
  • 低版本IE处理

    ie兼容处理

     

    css兼容代码示例

    csshack使用

    ie的css兼容是一层层覆盖关系。

    /IE6 绿色 IE7 黑色 IE8紫色 IE9橘黄 1E10灰色/

    .hack{
    	background-color:red; /*默认*/
    	background-color:purple; /* IE8 IE9 IE10 紫色 9 10被下一条覆盖*/
    	background-color:orange9;/*IE9 IE10 橘黄色*/
    	*background-color:black; /* IE6, IE7 黑色,IE6会被下一条覆盖为绿色 */
    	_background-color:green; /* IE6 绿色 */
    }
    
    /*for IE10+ 灰色 此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
    	.hack { background-color:#A3A0A0; } 
    }
    /*Chrome Safari深红*/
    @media screen and (-webkit-min-device-pixel-ratio:0){
    	.hack { background-color:#5A090A;} 
    }    
    /*除了IE6 大杀器,一旦开启,无人能挡*/
    .important{
    	background-color:blue !important;
    }
    

    css兼容利器

    ie-css3.htc 可以使ie支持css3的部分效果
    用法 :

    behavior: url(js/ie-css3.htc);  /*(括号里是ie-css3.htc的地址)*/
    

     

    js代码兼容示例

    方法一,做event兼容

    //window.event不支持firefox,直接获取不到
    //使用event使其兼容,srcElement和target也是兼容代码
    
    function eventDemo1(event){
    	var event = event ? event : window.event;
    	var se = event.srcElement || event.target;
    	console.log(se.innerHTML);
    }
    

    方法二,使用js删除原有,然后创建重新替换

    //这里演示的案例是ie不支持直接更换input type元素
    
    function changeIptType2(){		//替换元素法
    	//获取input框父元素iptBox
    	var iptBox=document.getElementById("iptBox");
    	//获取当前的input框,并且获取其当前的value
    	var myIpt=document.getElementById("myipt");
    	var sValue=myIpt.value;
    	//删除原来的input框
    	iptBox.removeChild(myIpt);
    
    	//新建一个input框并指定它的id、type、value
    	var newIpt=document.createElement("input");
    	newIpt.id="myipt";
    	newIpt.type="password";
    	newIpt.value=sValue;
    	//将新建的input放到原来的位置,完成替换
    	iptBox.appendChild(newIpt);
    }
    

    方法三,使用第三方播放器代替video元素

    这里不做演示,只需要把代码下载下来进行更改即可
    如使用ckplayer替代video

    方法四,使用if IE方法来判断使用什么代码

    注意,if IE中写在body代码中

    <!--[if IE]>
    	这段文字只在IE浏览器显示
    	<link rel="stylesheet" href="css/ie.css">
    	<style>
    		body{ background:#ccc;}
    	</style>
    <![endif]-->
    
    <!--[if IE 6]>
    	<br/>这段文字只在IE6浏览器显示
    	<script>
    		alert("请更新到最新浏览器");
    	</script>
    	<style>
    		body{display:none}
    	</style>
    <![endif]-->
    

     

    js浏览器版本显示

    可以使用js在不同版本设定不同样式,或者location到其他页面

    var showEle=document.getElementById('show');
    showEle.innerHTML="当前浏览器标示为:"+window.navigator.userAgent
    	+"<br/>版本为:"+window.navigator.appVersion;
    try{
    	if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/6./i)=="6."){ 
    		aboutEle.innerHTML+="<br/>识别结果:IE 6";
    		//设置样式 location指向另一个页面
    	} 
    	else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7."){ 
    		aboutEle.innerHTML+="<br/>识别结果:IE 7";
    	} 
    	else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8."){ 
    		aboutEle.innerHTML+="<br/>识别结果:IE 8";
    	} 
    	else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9."){ 
    		aboutEle.innerHTML+="<br/>识别结果:IE 9";
    	} 
    	else if(navigator.userAgent.indexOf("Chrome") != -1) { 
    		aboutEle.innerHTML+="<br/>识别结果:Chrome";
    		// document.body.style.background="red";
    	} 
    	else if(navigator.userAgent.indexOf("Opera") != -1) { 
    		aboutEle.innerHTML+="<br/>识别结果:Opera";
    	} 
    	else if(navigator.userAgent.indexOf("Firefox") != -1) { 
    		aboutEle.innerHTML+="<br/>识别结果:Firefox";
    	} 
    	else if(navigator.userAgent.indexOf("Netscape") != -1) { 
    		aboutEle.innerHTML+="<br/>识别结果:Netscape";
    	} 
    	else if(navigator.userAgent.indexOf("Safari") != -1) { 
    		aboutEle.innerHTML+="<br/>识别结果:Safari";
    	} 
    	else{ 
    		aboutEle.innerHTML+="<br/>识别结果:无法识别的浏览器";
    	} 
    	console.log(window.navigator);
    }
    catch(e){}
    
  • 相关阅读:
    个人冲刺二(7)
    个人冲刺二(6)
    个人冲刺二(5)
    个人冲刺二(4)
    对称二叉树 · symmetric binary tree
    108 Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
    530.Minimum Absolute Difference in BST 二叉搜索树中的最小差的绝对值
    pp 集成工程师 mism师兄问一问
    17. Merge Two Binary Trees 融合二叉树
    270. Closest Binary Search Tree Value 二叉搜索树中,距离目标值最近的节点
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/12422257.html
Copyright © 2011-2022 走看看