IE8下的不兼容（一级）

Html和Css的hack兼容写法--->>推荐https://www.cnblogs.com/qiujianmei/p/7192481.html
　　　　　　　　　　　　--->>推荐https://www.aliyun.com/jiaocheng/690542.html
　　　　　　　　　　　　--->>推荐https://blog.csdn.net/Wbiokr/article/details/72758281
以下两点是第三个推荐连接的内容（直接写出来了，方便查看）：
第一点、Css属性hack：
\9 //IE6/IE7/IE8/IE9/IE10都生效

\0 //IE8/IE9/IE10都生效，是IE8/9/10的hack

\9\0 //只对IE9/IE10生效，是IE9/10的hack

/*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */

.ie10 #hack{
color:red; /* Only works in IE10 */
}

第二点、条件注释：

针对IE8部分属性的兼容：
1.rgba不兼容：
//一般的高级浏览器都支持
background: rgba(255,255,255,0.1);

//IE8下
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的。但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。

第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；就是白色。

rgba和IE下filter值的转换：
0.1---19，0.2---33，0.3---4C，0.4---66，0.5---7F,0.6---99,0.7---B2,0.8---C8,0.9---E5

2.background-size不兼容：
在IE浏览器中，可以通过滤镜filter来实现。样例：
.parent {
width: 400px;
height: 400px;
margin: 100px;
border: 1px solid red;
background: url(img/aaa.jpg) no-repeat center center;
background-size: 100% 100%;
/*针对IE8的hack，目的是除掉之前background*/
background: none\9;
/*下一行为关键设置*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');
};
原理：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop：剪切图片以适应对象尺寸。 image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

3.@media queries不兼容：
①http://www.dbmng.com/art-1659.html打开改地址下载respond.min.js
（respond.js/respond.min.js让IE6-8支持CSS3 Media Query）
②引入即可，建议放在head标签中css样式之后。
注意事项：
1、需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）；

2、需要外部引入CSS文件，将CSS样式书写在style中是无效的；

3、由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面;

4、另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中;

5、最好不要为CSS设置utf-8的编码，使用默认

4.box-shadow不兼容之使用IE下的滤镜方法：
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=9);
说明： ①strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色（尽量使用数字）
使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）
②color不能缩写，比如#000000不能缩写为#000不然会出问题，设置失效。
③Direction=0,//上面有阴影，Direction=90,//右边有阴影，
Direction=180,//下边有阴影，Direction=270,//左边有阴影，

5.bootstrap导航栏不显示在IE8下的不兼容：
①在head中加上<meta http-equiv="X-UA-Compatible" content="IE=edge">
②在head中加上下面这段：
[if lt IE 9]
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
[endif]

posted on 2018-11-29 16:34 _xinT 阅读(275) 评论(0) 收藏举报