仿京东首页，浏览器兼容小结

Posted 2020-08-24 ZhangCui

练习做了一个京东首页，使用不同浏览器测试了一下，发现了不少的问题，做一下总结。

地址：https://zhangcuizc.github.io/jd-new/

1、IE10

在IE10中基本正常，主要的问题是设置了链接的图片在IE10中都会有一个边框，不仅丑而且导致部分地方布局混乱，当然解决方法也很简单，在reset.css中重置所有图片的边框样式即可：

img{
    border:none;
}

2、IE9

IE9中主要有两个问题，一是不支持linear-gradient，所以使用渐变作为背景色会失效。比如正常情况下：

代码如下：

.lovelife-list-item1 .lovelife-list-title{
    background: -webkit-linear-gradient(left, #974676, #9e4075);
    background: -o-linear-gradient(left, #974676, #9e4075);
    background: linear-gradient(to right, #974676, #9e4075);
}

在支持linear-gradient中使用当然不会有问题，但如果在IE9中，那么这样的代码就会导致没有背景色，最简单的解决办法是做降级处理，加上一句背景色声明即可，毕竟渐变还是纯色有时候影响并不大，或者根本看不出来：

.lovelife-list-item1 .lovelife-list-title{
    background-color: #974676;
    background: -webkit-linear-gradient(left, #974676, #9e4075);
    background: -o-linear-gradient(left, #974676, #9e4075);
    background: linear-gradient(to right, #974676, #9e4075);
}

这样会在不支持渐变的情况下显示背景色，比如：

不过虽然问题解决了，我还是有一些疑问，在不支持linear-gradient的情况下只会应用bgc声明，这个好理解，可是在支持渐变的情况下，为什么即使改变了bgc声明的位置，渐变的声明也不会被覆盖呢，不都是颜色嘛？难道是bgc声明和bg的声明还有优先级？查了查CSS权威指南，好像没有这个说法。又在网上查了查，发现，还真不都是颜色。bgc声明的是背景色无误，然而linear-gradient是一个渐变图像！linear-gradient更具体的声明是background-image：linear-gradient(to right, #974676, #9e4075)，这也就解释了为什么它们不会互相影响。

所以使用渐变的时候，一定要设置背景色！

在IE9中遇到的另一个问题是transtion过渡效果无效。

在这里实现的效果是利用transform和transtion实现鼠标悬浮在图片上时图片有一个移动的动画效果。由于transtion在IE9中无效，而transform在IE9中经过-ms-后是有效的，导致的结果就是很生硬的移动效果。看了看京东原版的页面，解决办法是在支持transition的情况下，给html标签设置一个特定的class，比如csstranstion，然后：

.csstranstion moveleft:hover{
    //tranform
    //transtion
}

这样的话在IE9中由于没有csstranstion类，所以:hover动画便无效，京东够能偷懒的，简单粗暴的解决办法……

检测浏览器是否支持transtion的jq方法：

    // jQuery.support.transition
    // to verify that CSS3 transition is supported (or any of its browser-specific implementations)
    $.support.transition = (function(){ 
        var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
                       
        return support; 
    })();

来源：http://mengqing.org/archives/jquery-browser-transition.html

3、Chrome

在强大的Chrome面前出现一个大问题，我知道是我代码写得不好……感觉firefox更强大，写再烂的代码都没有太大的问题。。

页面中有fixed的元素时，在鼠标滑过transtion和transform的动画时，很大几率造成fixed元素的闪动。

虽然知道问题出在transtion和transform，不过目前还没有找到更好的解决办法，有解决办法再来补充。