网页中的视频底部出现白边

最近做网页的时候遇到的一个问题，html元素如下

 1           <div class="re-bg" >
 2               <div class="video-word face-bg">
 3                   <div class="video-center-word">
 4                       <section class="fre-wrap center-wrap">
 5                           <h2 class="move">{{_('face')}}</h2>
 6                       </section>
 7                   </div>
 8               </div>
 9               <div class="video-wrap2">
10                   <video src="{{static_url('video/1.mp4')}}" autoplay="autoplay" loop="" class="video">
11                       您的浏览器不支持本视频播放，请尽快升级
12                   </video>
13               </div>
14           </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，就没有白边了,在此做个记录