hover背景图偏移、抖动问题

第一种情况：边框导致背景图抖动>>>>移入前没有边框，移入后显示边框

解决：给背景图添加一个大小相同、透明的边框即可        //border:1px solid transparent;

第二种情况：各浏览器渲染问题>>>>排查所有代码均没有问题，但鼠标移入后出现背景图1-2px抖动，

（笔者删除自己代码特定样式后不再出现抖动：删除父元素width样式、删除margin:0 auto----解决问题）

问题排查：

①ctrl+滚轮放大缩小页面后抖动消失，测试各主流浏览器（谷歌、火狐、opear）在特定大小下均出现hover移入抖动问题，edge无出现该问题

②测试不同电脑(win7、win10、分辨率不同)，谷歌(开发者版、72版)均出现该问题，火狐在高分辨率的屏幕下出现该问题

③重写代码，改变盒子模型大小，放大缩小浏览器检测：在特定大小依旧抖动

解决：暂时找不到解决方案。（如果找到解决方案，欢迎给笔者留言！）

 笔者具体代码：

HTML代码：

   

   

   

   

   

       

           

           

               

               

               

               

                Mission

           

       

   

   

Less代码：

body{

  background-color: #333333;

  #wrap{

    .one{

      width: 205px;  //删除解决

      margin: 10px;

      .pic{

        width: 205px;

        height: 190px;

        background: url("../img/mission.png") center center no-repeat;

        transition: all .2s ease-out;

        &:hover{

          transform: rotate(360deg) scale(1.2);

        }

      }

      .con{

        box-sizing: border-box;

        width: 180px;

        height: 55px;

        line-height: 55px;

        font-size: 20px;

        font-weight: bold;

        color: #2DCB70;

        padding-left: 30px;

        margin:0 auto;    //auto计算出来的是12.5px，改成11px

        border: 2px solid rgba(255,255,255,0.5);

        background: url("../img/allow.png") no-repeat 135px center;

        .line{}

        .line-top{}

        .line-right{}

        .line-bottom{}

        .line-left{}

        &:hover{

          border:2px solid rgba(255,255,255,1);

        }

      }

    }

  }

}