1、css样式
问题描述:如果元素本身是内联元素,把它的display属性设置为inline-block时,所有浏览器都是支持的。 如果元素本身是块级元素的,把它设为display:inline-block; ie6/ie7/ie8/ie9都是不支持的。
解决方案:在css中改变元素的行块级时,如下示例
display:inline-block;
*display: inline;/*兼容IE*/
zoom:1;/*兼容IE*/
2、判断是否是ie浏览器,针对ie浏览器不同版本,展示不同的代码
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否是IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;//判断是否是IE11
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7; //ie7浏览器
} else if(fIEVersion == 8) {
return 8; //ie8浏览器
} else if(fIEVersion == 9) {
return 9; //ie9浏览器
}else if(fIEVersion == 10) {
return 10; //ie10浏览器
} else {
return 6; //IE7版本以下版本
}
} else if(isEdge) {
return 'edge'; //edge浏览器
} else if(isIE11) {
return 11; //IE11浏览器
}else{
return -1; //不是ie浏览器
}
3、判断是否是360浏览器
var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
if (isChrome() && is360) {
//要执行的代码
header.ieState = true;
header.linkState = false;
ieHomeResize()
}
//检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
function isChrome(){
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("chrome") > 1;
}
//获取mime
function _mime(option, value) {
var mimeTypes = navigator.mimeTypes;
for (var mt in mimeTypes) {
if (mimeTypes[mt][option] == value) {
return true;
}
}
return false;
}
4、filter滤镜
问题描述:谷歌,火狐,safri,360极速模式,ie9以下都可以正常使用。ie10+以上不支持filter滤镜。
解决方案:可以采用svg解决,如下案例,首先引入svg文件,可以直接写在html里,也可以单独写一个svg文件,这里是直接写在html中。id是唯一的,需要和引用处的id一致。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:218px;height:40px;">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
在需要的地方加入svg
<img src="avatarImgSrc" style="display:none;width:218px;height:40px" alt="" class="svgSiblings">
<svg style="width:218px;height:40px" class="svgImg">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://test.jklife.com:8888/jkgwimage/upload/content/file/2018/12/10/93a7646a04934a838430c44809675f68.png" x="0" y="0" width="218" height="40" filter="url('#grayscale')"></image>
</svg>
如果需要引入多个svg,可以在id后添加数字进行区分。 通过判断浏览器,在ie10+浏览器,360浏览器等不支持filter滤镜的浏览器中,将linkState设置为false。
在html中根据linkState区分展示,如下
<div ms-if=“linkState">
<img ms-attr-src='el.avatarImgSrc' class="gray companyImg" />
</div>
<div ms-if=“!linkState">
<img ms-attr-src="el.avatarImgSrc" style="display:none;width:218px;height:40px" alt="" class="svgSiblings">
<svg style="width:218px;height:40px" class="svgImg">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:ms-attr-href="el.avatarImgSrc" x="0" y="0" width="218" height="40" ms-attr-filter="url('#grayscale{{el.id}}')"></image>
</svg>
</div>
5、浏览器对avalon支持
问题描述:部分浏览器不支持avalon的ms-attr-style属性,例如ie。
解决方案:设置一个状态,通过判断浏览器的方式给ieState不同的值。ieState=true时是ie浏览器,ieState=false时是其他浏览器
//不支持的浏览器
<div class='bj full' ms-if="!ieState" ms-attr-style="background-image:url('{{el.avatarImgSrc}}');-webkit-background-image:url('{{el.avatarImgSrc}}');-moz-background-image:url('{{el.avatarImgSrc}}')">
</div>
//支持的浏览器
<div class="bj full" ms-if="ieState" style="overflow: hidden;">
<img ms-attr-src="{{el.avatarImgSrc}}" width="100%"/>
</div>
6、WOW.js不支持ie10以下的浏览器,无法展示data-wow-delay="0.2s"的效果
//执行的浏览器
<a ms-if="!ieState" data-wow-delay="0.2s" class="marginRight50 text-center wow fadeInUp" href="#!/serviceGuide">
<img src="./images/icon_service.png" class="img50"/>
</a>
//不执行的浏览器
<a ms-if="ieState" class="marginRight50 text-center wow fadeInUp" href="#!/serviceGuide">
<img src="./images/icon_service.png" class="img50"/>
</a>