前端的适配主要包括各个浏览器和不同版本之间的适配，重点考虑IE8，所以这里总结几个目前知道的IE8适配方面的知识。
HTML5新标签
很多HTML5新增的标签在IE8中都不支持，比如header、section、footer等。
例如下面在html文件中简单的使用上面提到的这几个标签，看下在IE8和其他版本中的效果。
html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header{
background: yellow;
width: 100px;
height: 50px;
}
section{
background: red;
width: 100px;
height: 100px;
}
footer{
width: 100px;
height: 50px;
background: aquamarine;
}
</style>
</head>
<body>
<header>
this is header
</header>
<section>
this is section
</section>
<footer>
this is footer
</footer>
</body>
</html>在IE9中的效果如下：
在IE8中的效果如下：
可以看到这几个标签在IE8中并没有效果，因为IE8对它们不提供支持。
flex布局
flex和之前Android用到的布局方式很相似，所以理解起来很简单，但因为很多不支持，所以 就很少使用了。还是通过代码来看下在IE8下的效果。
html代码：
<div style="display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: red">
<div style="width: 50px;height: 50px;background: aquamarine">1</div>
<div style="width: 50px;height: 50px;background: yellow">2</div>
<div style="width: 50px;height: 50px;background: mediumvioletred">3</div>
</div>在IE10和IE8中的的效果分别如下：
可以看出flex布局在IE8 甚至IE9中都不支持的。
rgba
rgba（255，255，255，0.5）这样的半透明设置在IE8中也是不生效的。
CSS3新特性
如 border-radius这种设置圆角非常方便的也不支持
@media媒体查询
IE8完全不支持媒体查询，但可以通过respond.js文件使其支持。具体使用方式：
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<![endif]-->为IE8单独设置CSS文件
为IE8单独编写CSS文件然后引入 ：
<!--[if lt IE 8]><link rel="stylesheet" href="../css/indexforie.css"/><![endif]-->
扫一扫
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
