火狐浏览器与谷歌浏览器定位偏差问题

 

html

  <!-- 右边固定tab开始 -->
  <div class="right-fixed-bar">
    <ul>
      <li class="bar-item">
        <div class="bar-item-img">
          <img src="../images/news/phone.png" alt="">
        </div>
        <div class="bar-hover">0791-88165837</div>
      </li><br>
      <li class="bar-item">
        <div class="bar-item-img">
          <img src="../images/news/qq.png" alt="">
        </div>
        <div class="bar-hover qq-img">
          qq
        </div>
      </li><br>
      <li class="bar-item message">
        <div class="bar-item-img">
          <img src="../images/news/message.png" alt="">
        </div>
        <div class="bar-hover">在线留言</div>
      </li><br>
      <li class="bar-item">
        <div class="bar-item-img">
          <span class="toTop">TOP</span>
        </div>
      </li><br>
    </ul>
  </div>
  <!-- 右边固定tab结束 -->

css

/* 右边固定tab开始 */
.right-fixed-bar{
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
.right-fixed-bar .bar-item{
  position: relative;
  top: 0;
  right: -248px;
  box-sizing: border-box;
  height: 104px;
  background: linear-gradient(180deg, #1A5EB8 0%, #093189 100%);
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  margin-bottom: 10px;
  padding-top: 31px;
  padding-left: 38px;
}

.right-fixed-bar .bar-item:last-child{
  width: 106px;
  margin-bottom: 0;
}
.right-fixed-bar .bar-item .bar-item-img,
.right-fixed-bar .bar-item .bar-hover{
  display: inline-block;
  font-size: 30px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #fff;
  line-height: 35px;
  margin-bottom: 24px;
}
.right-fixed-bar .bar-item .bar-hover{
  margin: 0 25px;
}
.right-fixed-bar .bar-item .bar-item-img:nth-child(1){
  width: 36px;
  height: 42px;
}
.right-fixed-bar .bar-item .bar-item-img:nth-child(2){
  width: 36px;
  height: 41px;
}
.right-fixed-bar .bar-item .bar-item-img:nth-child(3){
  width: 35px;
  height: 33px;
}
.right-fixed-bar .bar-item .bar-item-img .toTop{
  position: relative;
  box-sizing: border-box;
  width: 35px;
  height: 42px;
  font-size: 18px;
  font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 23px;
  padding-top: 24px;
}
.right-fixed-bar .bar-item .bar-item-img .toTop::before{
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .12px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #fff;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

.right-fixed-bar .bar-item .bar-hover.qq-img{
  display: none;
}
.right-fixed-bar .bar-item:hover{
  background: #4AA3E7;
}
.right-fixed-bar .bar-item:nth-child(1):hover,
.right-fixed-bar .bar-item.message:hover{
  right: 0;
}


/* 右边固定tab结束 */

效果图：

 

 

解决方法：

html

<!-- 右边固定tab开始 -->
    <div class="right-fixed-bar">
      <ul>
        <li class="bar-item bar-phone">
          <div class="bar-item-img">
            <img src="~assets/images/news/phone.png" alt="">0791-88165837
          </div>
        </li>

        <li class="bar-item bar-qq" @click="toChat">
          <div class="bar-item-img">
            <img src="~assets/images/news/qq.png" alt="">
          </div>
        </li>

        <li class="bar-item bar-message">
          <div class="bar-item-img">
            <img src="~assets/images/news/message.png" alt="">在线留言
          </div>
        </li>
        
      </ul>
    </div>
    <!-- 右边固定tab结束 -->

 

css

/* 右边固定tab开始 */
.right-fixed-bar{
  position: fixed;
  right: 0;
  top: 30%;
  height: 105px;
  width: 100px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 2;
}

.right-fixed-bar .bar-item{
  position: absolute;
  left: 0;
  box-sizing: border-box;
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  align-items: center;
  height: 105px;
  width: 100px;
  background: linear-gradient(180deg, #1A5EB8 0%, #093189 100%);
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  margin-bottom: 10px;
  padding-left: 35px;
}

.right-fixed-bar .bar-item.bar-phone{
  top: 0;
  width: 500px;
}
.right-fixed-bar .bar-item.bar-qq{
  top: 145px;
  width: 100px;
}
.right-fixed-bar .bar-item.bar-message{
  top: 290px;
  width: 280px;
}
.right-fixed-bar .bar-item .bar-item-img{
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  display: flex;
  align-items: center;
  font-size: 30px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #fff;
}
.right-fixed-bar .bar-item .bar-item-img img{
  margin-right: 35px;
}
.right-fixed-bar .bar-item:hover{
  cursor: pointer;
  left: 0;
}
.right-fixed-bar .bar-phone:hover{
  left: -300px;
}
.right-fixed-bar .bar-message:hover{
  left: -180px;
}

/* 右边固定tab结束 */

效果图：