IE11 不考虑高度：自动答案

【问题标题】：IE11 not respecting height: autoIE11 不考虑高度：自动
【发布时间】：2017-11-30 14:03:58
【问题描述】：

在 Internet Explorer 11 中，https://www.superiorit.com.au 右上角的“s 控件”图标显示为 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 高的图像？

【问题讨论】：

实际上你的 CSS 工作正常。因为如果我将宽度限制设置为直接父级或父级的父级，那么它将宽度设置为预期大小。问题出在其他地方。

标签： css internet-explorer-11

【解决方案1】：

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

这会干扰结合浮动、flexbox 和calc() 宽度的有点脆弱的布局。

【讨论】：

【解决方案2】：

从img标签中删除width="375" height="94"

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

并制作width: 100%

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

【讨论】：

【解决方案3】：

添加最大高度：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
}

【讨论】：

谢谢 Umesh。 max-height: 30px 降低 Chrome 中图片的高度。
是的，我明白你的意思。它减小了铬的尺寸。如果我想办法帮助你，我会告诉你的。

【解决方案4】：

你可以使用IE具体的css，IE 11支持的css是：

*::-ms-backdrop,

您必须做的另一件事是，您必须从img 标记中删除内联height 和width 属性。您必须在 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
}

希望这会对你有所帮助。

【讨论】：