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
   }