html - 缩放后表格单元格显示 div 之间出现间隙

Question

我遇到了一个非常不寻常的 chrome 错误。基本上，我有 2 个带有表格单元格显示的 div。一个有文本，另一个是输入。当页面放大然后再次缩小时会发生什么。输入的顶部和顶部边框之间会出现一个间隙，并且每次放大和缩小页面时，间隙都会变得越来越大。如果两个 div 都只有文本或都有输入，那么没关系。设置 div 高度没有区别。FF没有这样的问题。这是一个小图来说明。

开始是这样的：

                .--------.--------.                
                .  text  . |input|. 
                .--------.--------.        

放大和缩小连续时间后，它看起来像这样：

                . -------.--------.                
                .        .        .
                .        .        . 
                .  text  . |input|. 
                .--------.--------.

这是代码：

.border{
         border:1px solid grey; 
         display:table-cell;
       }

      <div class = "border">text</div>
      <div class = "border"><input /></div> 

有谁知道为什么会发生这种情况，以及可以做些什么来防止它？谢谢。

Answer 1

试试这样，它会帮助你...

  .border
   {
     border:1px solid grey;
     display:table-cell;
     text-align: center;
     vertical-align: middle
   }