縮放後出現在表格單元格顯示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 
    }