Internet Explorer 高度：100% 不产生与 Chrome 相同的结果答案

【问题标题】：Internet Explorer height: 100% not producing same result as ChromeInternet Explorer 高度：100% 不产生与 Chrome 相同的结果
【发布时间】：2016-06-21 22:42:24
【问题描述】：

来自this answer 我已经在this site 的服务菜单中设置了img 图标的所有父容器，以防止图标显示小于Chrome。

在 Chrome 中（正确）：

在 IE 10 中（大部分不正确）：

我使用的 IE 特定样式表是：

<!--[if IE]>
    <link rel="stylesheet" href="https://www.orsgroup.com.au/wp-content/themes/nevada-child/css/ie.css" media="screen" />
<![endif]-->

包含：

html, body, #wrap, #nav-wrap, #nav-wrap .container, .ubermenu, .ubermenu-nav, .ubermenu-submenu, .ubermenu-item, .ubermenu-target {height: 100%;}

但是，img 图标仍然显示得很小。

主样式表中有 CSS：

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
}

然而 IE 中的图标似乎都显示在与服务标题相同的高度：例如<span class="ubermenu-target-title ubermenu-target-text">Employment Services</span>

我讨厌 IE 检查器并且难以使用它。

帮助表示赞赏。

【问题讨论】：

在这种情况下，为什么不将它们的高度设置为1em？而不是auto?
在 Chrome 中，img 图标显示为客户端满意，它们正在适应包含 <a class="ubermenu-target> 的高度，而不是静态高度。
auto 不会满足这些要求中的任何一个，它只是暗示图像的标准高度。它们可能看起来都一样高因为那是它们的自然高度。
对。内联宽度和高度为 10px。为什么 Chrome 会放大它们？我看不到执行此操作的 CSS 规则。为什么 IE 的行为方式不一样？
当我在 chrome 中查看时，它没有被放大。我在下面的解决方案仅在 chrome 中进行了测试。尚未在 IE 中测试。

标签： css internet-explorer

【解决方案1】：

您似乎在图像标签中将图像设置为10px 的width 和height 的10px。如果你控制你的 html，你可以删除这些，它应该可以正常工作。如果您只控制 css，只需将 width: auto; 添加到以下内容：

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
    width: auto;
}

【讨论】：

补充一点，除非万不得已（就像在 CSS 中根本没有提及它们），否则图像并不真正遵守宽度高度的定义。跨度>
那么为什么添加width: auto;会告诉浏览器使img更大呢？浏览器是否将其解释为以实际大小显示 img 的指令？
好问题。我已经发布了一个关于这个here的问题。