html - ズーム後に table-cell-display div 間にギャップが表示される

Question

クロムで非常に珍しいバグが発生しています。基本的に、テーブルセル表示の 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
   }