divテーブルのセルの高さが画像の高さを超えています

Question

div（display：table cell）にイメージを収めようとしています。幅はdivの幅を超えることはありませんが、高さは常に同じです。私はIE 11ではテーブルの全体的なサイズが正確であるため、うまくいきます。しかし、Chromeでは計算された高さは9.297ピクセルです。 Firefoxでは計算された高さは10.5ピクセルです。 CSSのdiv の指定された幅とセルは、9ピクセル×9ピクセルです。下のコードから見ることができるように、それはテーブルの構築ですが、divにあります。私は との年齢のためにそれの周りに投稿の負荷の助けをしたが、私はそれが完全に動作するようにすることはできません。明確にするには、高さは9ピクセルを超えることはできません。

誰かがそれを動作させるためのアイディアを持っているかどうかは疑問でした。私はそれがIEで動作していると思うと言いますが、他のものではありません。

私はこれをJSFiddle-https://jsfiddle.net/eermepfe/に含めました。それは私のテーブルの正確なレプリカではありません。私は非常に多くの細胞を持っています。さらに、フィドルの高さの伸びは、自分のbroswerの結果よりもさらに悪いです。まだそれは問題を捉える。

おかげであなたの助け

<div id = "table"> 

<div class = "row"> 

<div class = "inner"> 

<img src = "image.png"> 

</div> 

</div> 


</div> 

は、多くの行と行の多くのdivがありますが、彼らは上記の設定に従ってください。

CSS 

#table{ 
display: table; 
table-layout: fixed; 
height: 700px; 
width: 1200px; 
} 

.row{ 
display:table-row; 
} 

.inner{ 
text-align: center; 
line-height: 9px; 
display: table-cell; 
background-color: red; 
height: 9px !important; 
width: 9px; 
border-top: 1px solid black; 
border-right: 1px solid black; 
} 

img{ 
height: auto; 
max-width: 9px; 
vertical-align: middle; 
display: block; 
} 

Answer 1

.inner要素

.inner{ 
    box-sizing:border-box; 
    display:flex; 
    align-items:flex-start; 
} 

編集にこのスタイルを追加し、これらのスタイルを試してみてください。

.table{ 
    width:100%; 
} 
.row{ 
    display:flex; 
} 
.inner{ 
    box-sizing:border-box; 
}