缩放后出现在表格单元格显示div之间的空白

Question

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

它开始是这样的：

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

放大后出sereral倍，它看起来像这样：

   . -------.--------.     
       .  .  . 
       .  .  . 
       . 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 
    }