缩放后表格单元格显示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
   }