Image size difference between chrome and internet explorer 11

Question

I am making a simple website addition for images, but the size on internet explorer 11 is being computed to be much smaller, and changes between images:

internet explorer image

but works fine on chrome

chrome image

Here is the css for the image:

.postImage {
  padding: 0 0 0 15px;  
  height: 50px;
  width: 50px;
  border-radius: 2px;
}

Thanks in advance!

Answer 1

So, after tinkering around with it a bit and getting help from here , I got it working across browsers. It seems strange since I am setting height twice, but it is the only way that worked as I expected it to for IE11.

parent class:

.postBox{
  height: 100px;
  width: 220px;
  margin-bottom:15px;
  display: flex;
  cursor :pointer;

  /* to fix IE11 */
    min-height:1px;
  padding: 10px 0 0 0px;
}

Child image class:

.postImage {
  padding: 0 0 0 15px;  
  border-radius: 2px;

/*   to fix IE11 not working */
  max-height:50px;
  max-width:50px;
  height: 50px;
}