前端浏览器兼容优化

<script language="JavaScript">  
    <!--  
function getOs()  
{  
    var OsObject = "";  
   if(navigator.userAgent.indexOf("MSIE")>0) {  
        return "MSIE";  
   }  
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){  
        return "Firefox";  
   }  
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) {  
        return "Safari";  
   }   
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){  
        return "Camino";  
   }  
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){  
        return "Gecko";  
   }  
     
}  
 alert("您的浏览器类型为:"+getOs());  
    -->  
</script>

 *、真的有用，在相应的浏览器版本中写下指定样式即可。

.test{ /* 1. */
/* color:#09F\0; 以前是IE8/9, 现在10也支持 */
color:#09F\0/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
}
@media all and (min-width:0) { /* 2. */
.test{color:red\9; }/* IE9 only, 现在IE10也支持 */
/* Ps:老外的方法都是\0，根本没考虑Opera */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
.test { color: green; } /* IE10+ */
}
:root .test { color:#963\9; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */
*background-color:#00f;/*ie7*/ 
_background-color:#ff0;/*ie6*/ 

 

*、select在IE下去除箭头样式

/*清除ie的默认选择框样式清除，隐藏下拉箭头（但仅支持IE10+,其他低版本还需要下点功夫克服）*/  
select::-ms-expand { display: none; } 
引自：http://blog.csdn.net/duofx/article/details/53009613

 

*、chrome 调试移动web时字体被放大？

添加-webkit-text-size-adjust:none;即可
但手机端依旧有问题，但PC端的移动模拟已正常
无奈，需要继续深挖···
引自：https://segmentfault.com/q/1010000004139245?_ea=509215

 

*、IE7下层的摆放有交叉，是因为z-index应用不当，一定要将该属性置于最外层（父元素）

最外层的父元素
引自：http://www.neirong.org/post-313.html
另外IE7不支持height:1%，这种百分比的写法，切记切记

 

*、判断浏览器版本及其类别尤其是360

 //测试mime
 function _mime(option, value) {
	 var mimeTypes = navigator.mimeTypes;
	 for (var mt in mimeTypes) {
		 if (mimeTypes[mt][option] == value) {
			 return true;
		 }
	 }
	return false;
 }
//调用该方法即可
function is360() {
	var isChrome = navigator.userAgent.indexOf("Chrome") > -1?true:false;
	var is360 = false;
	if(window.navigator.userAgent.indexOf('Chrome')!=-1){  
		is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
		if (isChrome && is360) { 
		is360 = true;
		isChrome = false;
	   }
	}
        return is360;
}

 

*、判断浏览器类型