火狐31.0以下兼容注意事项
1.css不兼容
background-position: 0 -30px;//兼容
background-position-y: -30px;//不兼容
1.2 关于使用PIE.htc 进行IE兼容CSS3
圆角CSS3等IE9+会兼容,IE8以下不兼容CSS3,使用PIE,PIE兼容所有IE浏览器
一、首先需要下载一个文件PIE.htc
提取码:32in
二、使用例子
1、引入文件。
注意:
最好是直接使用 URL 的绝对路径;
注意css文件相对html位置或者绝对路径,非css位置;
一般直接使用*引入在IE8以下让每个元素具有;
2、在css元素中加上 behavior:url(pie.htc);
3、可以愉快的写css hack啦 ,这时需要的圆角平移等等各种css3属性在ie8上都可以展示出来
.box{
width:250px;
height:250px;
background-color:#34538b;
-moz-border-radius:10px;
-webkit-border-radius:10px;
/* behavior: url(plugins/lib/PIE-1.0.0/PIE.htc); */
/* 或者绝对路径 */
behavior: url(file:///D://plugins/lib/PIE-1.0.0/PIE.htc?v=1576805621479);
border-radius:10px;//圆角
border-image: url(../../../images/star.png) 30 30 round;//边框背景(IE不生效)
-pie-background: rgba(187, 158, 240, 0.3);//rgba
-pie-background: linear-gradient(148deg, #00e8bb 0, #eab7cf 43%, #9aece2 100%);//渐变
}
1.3不引入PIE得一种方式解决兼容
线性渐变(linear-gradient)
IE系列
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平
Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变
Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变
webkit,如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
参数:linear线性, x1 x2, x3 x4 x1与x3相同时垂直,x2与x4相同时水平 from起始颜色 to结束颜色
1.4 rgba,兼容所有浏览器IE专属滤镜 filter:Alpha(opacity=x)
.demo{
padding: 25px;
background: #000000;
filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.demo p{
color: #FFFFFF;
position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明 */
}
2.js
检查jquery版本
假如项目中有用到jquery,则首先检查jquery版本是否在2.0以上.2.0以上版本的jquery不支持ie8.