经验分享之PC端兼容性如何做

一、Swiper 轮播问题

① 引入

- 注释外面的是 IE10 及以上用的 swiper 版本（swiper3）

- 注释里的是 IE9 及以下使用的版本（swiper2）

② 样式

使用 swiper2 需要设置：

.swiper-slide,.swiper-wrapper {
    height: auto !important;
}

因为 swiper2 自带 3000 多的高度。

③ 左右按钮与轮播点

swiper2 没有左右按钮，但是轮播点是有效的。可以在 IE9 及以下将左右按钮去除，轮播点显示出来并重新设置样式：

.ie .swiper-pagination {
    position: absolute;
    z-index: 20;
    bottom: 60px;
    width: 100%;
    text-align: center;
}
.ie .swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: 555;
    margin: 0 5px;
    opacity: 0.8;
    border: 1px solid fff;
    cursor: pointer;
}
.ie .swiper-active-switch {
    background: fff;
}

④ 轮播点写法（JS 判断 IE 版本）

if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) {
    pagin = ".index_banner .swiper-pagination"
    $(".index_banner .swiper-pagination").addClass("ie")
}

条件要 `< 10`（IE9 及以下）

⑤ autoplay 属性

- Swiper2 类型是 `number`，Swiper3 是 `object`

- 如果使用 swiper2 不能将 autoplay 定义成 `{}`，否则鼠标滚动时轮播图快速的自动循环轮播

var autoplay = {
    delay: 3000,
    stopOnLastSlide: true, // loop 无效
    autoplayDisableOnInteraction: false,
    paginationClickable: true,
}
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) {
    autoplay = 3000
}

二、 IE8 不可用样式及兼容写法

① nth-child 无效

建议加不同的类名控制。

② background 设置 rgba 在 IE 上无效

background: rgba(0, 0, 0, 0.5);

下一句关键设置

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=7f000000, endcolorstr=7f000000);

参考：https://www.cnblogs.com/mengfangui/p/6593086.html

 设置 filter 属性目的是上一行的透明度不起作用的时候执行

“#7f000000”是由两部分组成

第一部是#号后面的7f 。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

即：alpha*255得到的值再转换为16进制即可。

第二部分是7f后面的六位 是六进制的颜色值，跟rgb函数中的取值相同，比如rgb(255,255,255)对应#ffffff。

③ 伪元素

IE8 支持 `:`，不支持 `::`

所以在写伪元素时使用 `:`，例如 `selector:after` 而不是 `selector::after`

④ background-size:100% 100%; IE8 不兼容

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index_bg04.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png', sizingMethod='scale');
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png', sizingMethod='scale');

⑤ 获取自定义属性值

普通写法：

$("body").on("click", ".select-list-item", function (e) {
    var index = e.target.dataset.index;
});

兼容 IE 写法：

$("body").on("click", ".select-list-item", function (e) {
    var index, value;
    if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 10) {
        index = e.target['data-index'];
        value = e.target['data-value'];
    }
});

⑥ opacity 兼容 IE8

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter: alpha(opacity=90);

⑦ flex 布局不能使用

nth-child 等都不能使用。

三、网页放大 150% 后弹窗显示位置不对

出现原因： Layer 弹窗 top 值是动态计算的，放大 150% 之后 top 值变成负数。

解决方法： 点击视频时，如果屏幕大于 768，将 top 值固定为 10%

if ($(window).width() > 768) {
    $('video_pop_up').parents('.layui-layer-page').css({
        'top': '10%',
        'margin-left': "-640px"
    })
}

四、优化谷歌浏览器表单默认选中的样式

解决方法：

内阴影覆盖 

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px fff inset;
}

消除内阴影及颜色

input {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: none;
}