Image exceeding the height in the cell of the div table


I try to integrate an image into a div (display: table cell). The width never exceeds the width of the div but the height is always constant. Although I think in IE 11, this works fine, because the overall size of the table is exactly correct. But in Chrome, the calculated height is 9.297px; In Firefox, the calculated height is 10.5px. The specified width and cell of the div
in CSS is 9 pixels by 9 pixels. As you can see from the code below, this is a table construct but in divs. I've been playing with this for years with
using many messages on SO, but I can not quite work perfectly. To be clear, height, can not exceed 9 pixels.

I was wondering if anyone had any ideas to make it work. As I said, I think it works in IE, but not the others.

I've included this JSFiddle - This is not an exact replica of my table. I have so many cells that it would be ridiculous in a jsfiddle. In addition, stretching the size of the violin is even worse than my own results; Still he catches up with the problem.

Thank you for your help

Image exceeding the height in the cell of the div table

There are many lines and many divs in the lines, but they follow the above configuration.

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

The answer

Add this style to the .inner element

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

Edited, try these styles:

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

Related articles