網頁中的視頻底部出現白邊

       最近做網頁的時候遇到的一個問題，html元素如下

          <div class="re-bg" >
              <div class="video-word face-bg">
                  <div class="video-center-word">
                      <section class="fre-wrap center-wrap">
                          <h2 class="move">{{_('face')}}</h2>
                      </section>
                  </div>
              </div>
              <div class="video-wrap2">
                  <video src="{{static_url('video/1.mp4')}}" autoplay="autoplay" loop="" class="video">
                      您的瀏覽器不支持本視頻播放，請盡快升級
                  </video>
              </div>
          </div>

css讓整個視頻充滿.re-bg，然后vedio-word絕對定位，其中視頻的樣式如下：

.video-wrap2 {
    font-size: 0;
    width: 100%;
    height:100%;
}

.video{
    display:block;
    width:100%;
    height:100%;
    margin:auto;
    font-size:24px;
    object-fit: fill;
}

然后出現了一個比較奇怪的問題，在某些電腦上，視頻底部出現了一條1px的白邊，查看box是沒有border的，縮小瀏覽器白邊會沒有，最大化的時候就出現了。另外比較奇怪的就是同樣的樣式用在另外一塊相同大小的視頻區域時完全沒有這個現象。不知道原因，后面嘗試把display改為inline-block，就沒有白邊了,在此做個記錄