Front-end browser compatibility optimization

*, Really useful, just write the specified style in the corresponding browser version.

.test{ /* 1. */
/* color:#09F\0; used to be IE8/9, now 10 also supports */
color:#09F\0/; /* Used to be IE8 only, now IE9/10 also supports it. To exclude IE9, you need to use the following rule to reset IE9 style*/
}
@media all and (min-width:0) { /* 2. */
.test{color:red\9; }/* IE9 only, now IE10 also supports */
/* Ps: The methods of foreigners are all \0, and Opera is not considered at all */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
.test { color: green; } /* IE10+ */
}
:root .test { color:#963\9; } /* Previously IE9 only, now 10 also supports it, the priority is higher than @media, the priority is too high, try to use it as little as possible*/
*background-color:#00f;/*ie7*/
_background-color:#ff0;/*ie6*/

 

*, select to remove the arrow style under IE

/*Clear the default selection box style of ie, hide the drop-down arrow (but only support IE10+, other lower versions need to work hard to overcome)*/  
select::-ms-expand { display: none; }
Quoted from: http://blog.csdn.net/duofx/article/details/53009613

 

*. The font is enlarged when chrome debugs the mobile web?

Add -webkit-text-size-adjust:none;
But the mobile terminal still has problems, but the mobile simulation on the PC side is normal
Helpless, need to continue to dig deeper...
Quoted from: https://segmentfault.com/q/1010000004139245?_ea=509215

 

*, The placement of the lower layer of IE7 is crossed, because the z-index is not applied properly, and the attribute must be placed in the outermost layer (parent element)

outermost parent element
Quoted from: http://www.neirong.org/post-313.html
In addition, IE7 does not support height: 1%, this percentage of writing, remember to remember

 

*, determine the browser version and its category, especially 360

//test mime
 function _mime(option, value) {
	 var mimeTypes = navigator.mimeTypes;
	 for (var mt in mimeTypes) {
		 if (mimeTypes[mt][option] == value) {
			 return true;
		 }
	 }
	return false;
 }
// call this method
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;
}

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326443255&siteId=291194637