IE11 not respecting height: auto

Question

In Internet Explorer 11, at https://www.superiorit.com.au, the "s control" icon at top right displays with height: 94px;

as specified in the img tag:

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" width="375" height="94" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

but the CSS height: auto; in:

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: inherit;
    height: auto;
}

is not being respected by IE11. Chrome respects this CSS and reduces the height of the img to 25px tall:

How do I make IE11 display the image @ 25px tall?

Answer 1

Remove the display: inline-block style from #siteorigin-panels-builder-9 (the container .widget for the topmost header elements.

This is interfering with the somewhat-fragile layout that combines float, flexbox, and calc() widths.

Answer 2

remove width="375" height="94" from img tag

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

and make width: 100%

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

Answer 3

Add max-height:30px

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: inherit;
  max-height:30px
}