【前端】各种兼容

IE兼容

<meta http-equiv="x-ua-compatible" content="IE=9" >
<meta http-equiv="x-ua-compatible" content="IE=8" >
<meta http-equiv="x-ua-compatible" content="IE=7" >

兼容IE6,IE8,IE9,IE10,IE11,谷歌，火狐，360等常见的10个浏览器的HTML头部信息配置代码

<!DOCTYPE html>
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 ie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->  <html class="no-js" lang="en">  <!--<![endif]-->
 <head>
  <title>首页</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--IE10-->
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=8,IE=9,IE=10"/>
  <meta name=”renderer” content=”webkit|ie-comp|ie-stand”/>
  <!-- CSS styles -->
  <link rel="stylesheet" type="text/css" href="css/base.css" />
  <link rel="stylesheet" type="text/css" href="css/header.css"/>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <link rel="stylesheet" type="text/css" href="css/footer.css"/>
  
  <link rel="stylesheet" href="common/jquery/css/jquery.ui.all.css">
  <script src="common/jquery/js/jquery-1.8.2.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.core.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.widget.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.button.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.position.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.menu.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.autocomplete.js" charset="utf-8"></script>
  <script src="common/jquery/js/jquery.ui.tooltip.js" charset="utf-8"></script>
  <link rel="stylesheet" href="common/jquery/jquery/css/demos.css">
  <link rel='stylesheet' type='text/css' href="common/form/css/form.css" />
  
  <!--JavaScript-->
  <script src="common/jquery/js/jquery-1.8.2.js" charset="utf-8"></script>
  <script language="javascript" type="text/javascript" src="js/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
  <script language="javascript" type="text/javascript" src="js/misps/index.js"></script>
 </head>

浏览器兼容H5的标签

//js
var e="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while(i-){
	document.createElement(e[i]);
}

//浏览器支持新标签后，还需要添加标签默认的样式
//css
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
mark{background:#FF0;color:#000}

标题html5视频兼容

//提供WebM和Mp4两种格式的视频，兼容代码如下
<video controls>
	<source src="video.webm" type="video/webm">
	<source src="video.mp4" type="video/mp4">
	<!--向后兼容代码 -->
	<iframe width="480" height="360" src="http://www.*****.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>
</video>

html5音频兼容

//提供WebM和Mp4两种格式的视频，兼容代码如下
<video controls>
	<source src="video.webm" type="video/webm">
	<source src="video.mp4" type="video/mp4">
	<!--向后兼容代码 -->
	<iframe width="480" height="360" src="http://www.*****.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>
</video>

一些常用的meta

1

设置IE浏览器的兼容模式

但是在实际的项目中应该谨慎使用此方式，当在IE浏览器出现兼容问题时，

最好的做法是修改页面，编写规范的HTML代码，让页面支持最新的标准，而不是设置IE的兼容模式

此设置还有一种常见的设置值：

	<meta http-equiv=”X-UA-Compatible” content=”chrome=1”>

其中设置为chrome=1时，则会在IE9及以下浏览器中激活Chrome Frame，强制IE使用Chrome Frame渲染页面

2

设置页面在移动设备中的显示

一般针对移动设备优化的网页都会添加如下一条meta设置，

	<meta name=”viewport” content=”width-device-width, initial-scale=1, maximum-scale=1” />

从而使得网页在移动设备中显示正常

3

设置IE浏览器的“固定网站”功能

这是IE浏览器的独有功能，是从IE9开始支持的，能够将网站如同应用程序一样固定在Windows Vista及以上版本系统的任务栏中，并且在点击图标后显示网站相关的菜单列表

<meta name=”msapplication-task” content=”name=新鲜事;action-url=www.renren.com/home;icon-url=http://a.xnimg.cn/n/res/icons/newsfeed.ico />

Flex布局兼容写法

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

原文链接：https://blog.csdn.net/loyd3/article/details/107198888