IE11不尊重身高：自动

Question

在Internet Explorer 11中，在https://www.superiorit.com.au，＆＃34; s＆＃34;右上方的图标显示为height: 94px;

在img标记中指定：

<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">

但是CSS height: auto;位于：

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

未被IE11尊重。 Chrome尊重此CSS并将img的高度降低到25px高：

如何让IE11显示图像@ 25px高？

Answer 1

从display: inline-block（最顶层标题元素的容器#siteorigin-panels-builder-9）中删除.widget样式。

这会干扰结合了float，flexbox和calc()宽度的有点脆弱的布局。

Answer 2

添加 max-height：30px

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用IE具体 css ，IE 11支持 css ：

*::-ms-backdrop,

您需要做的另一件事是，您必须从height标记中删除内联width和img属性。您必须在 css 类中设置max-height。所以你的代码应该像

*::-ms-backdrop,.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
}

希望这会对你有所帮助。