ie8下兼容border-radius,box-shadow,background-size,rgba,媒体查询,html5标签的各种方式
ie8下很多css都存在兼容性问题，这里把常见的兼容性问题整理一下，方便日后需要的查找。
border-radius和box-shadow兼容ie8
background-size兼容ie8
rgba兼容ie8
媒体查询兼容ie8
html5标签兼容ie8
border-radius和box-shadow兼容ie8
这里我们用到的是ie-css3.htc,来处理一些样式兼容（border-radius,box-shadow,text-shadow）
<p class="radius_class">
border-radius兼容ie8
p>
<p class="shadow_class">
box-shadow兼容ie8
p>
.radius_class{
display: block;
width: 200px;
background: #ccc;
padding: 10px 20px;
margin: 10px;
-moz-border-radius:30px; /* Firefox */
-ms-border-radius:30px;
-o-border-radius:30px;
-webkit-border-radius:30px;/* Safari and Chrome */
border-radius: 30px;
text-align: center;
/*解决IE*/
behavior: url('./ie-css3.htc');
}
.shadow_class{
display: block;
width: 200px;
background: #ccc;
-moz-box-shadow: 0px 10px 5px #000; /* Firefox */
-webkit-box-shadow: 0px 10px 5px #000; /* Safari and Chrome */
box-shadow: 0px 10px 5px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url('./ie-css3.htc');
}
ie8下的效果如下：
问题：
一、只能同时4角圆角，不能单独设置；
二、div上可以正常使用，测试text文本框，会出现异常；
三、CSS文件要和页面在同一目录下，否则无效（放在与index.html同级的根目录下）
四、当前元素一定要有定位属性，像是position:relative或是position:absolute属性
五、z-index值一定要比周围元素的要高
六、出现背景变黑的情况，给元素加上background-color:#fffff
background-size兼容ie8
有时候图片的大小与自己设置的宽高不一样，需要用到background-size来让图片满足盒子的大小，但在ie8下background-size不兼容，这时我们可以使用滤镜来处理下：
.mybg{
width: 100px;
height: 100px;
background-image: url('./img/banner.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 100% 100%;
/* background-size:cover; */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/banner.png',sizingMethod='scale');
}
这样可以让IE也实现background-size:100%100%的效果。
注意！ filter路径是相对于页面，不是css的相对目录
filter参数说明：
src=“图片路径”，可以是相对，也可以是绝对；
sizingMethod：“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
- crop：剪切图片以适应对象尺寸。
- image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
- scale：缩放图片以适应对象的尺寸边界。
ps:如果设置了background-attachment:fixed;background-size属性会失效。
目前找到的是让图片cover兼容，让图片能和size:50%,30%;这种形式的兼容还没有找到。如果大家有找到的，希望留言告知一下，谢谢！
rgba兼容ie8
rgba的含义，r代表red，g代表green，b代表blue，红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba（255，255，255，0.1）就是透明度为0.1的白色。IE9及以上的浏览器是可以通过rgba设置透明度的。但是在ie8中是不支持的rgba的，ie8只能勉强支持rgb()函数（即去掉了透明度，只能表示颜色）
所以在ie8中设置透明就要用滤镜filter了
.rgba_class{
width: 100px;
height: 100px;
background: rgba(0,0,0,.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
}
filter中的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
filter中参数的颜色值是由两个部分组成的。
第一部是#号后面的7F(头两位)。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：
第二部分是后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0)对应#000000；都是黑色。
media Queries兼容ie8
这里我们需要引入respond.min.js,在css之后引入，最好写在head里面在link后引入respond.min.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页title>
<link rel="stylesheet" href="./styles/css/common.css">
<link rel="stylesheet" href="./styles/css/index.css">
head>
- 优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用
- 缺点：仅支持
media Queries的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。
ps:静态页面的时候ie8下会报错，在动态服务下页面没问题
html5标签兼容ie8
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->