Internet Explorer 9 不显示 PNG 图像答案

【问题标题】：Internet explorer 9 not displaying PNG imageInternet Explorer 9 不显示 PNG 图像
【发布时间】：2015-05-19 18:52:26
【问题描述】：

我的页面here没有显示徽标（应该在标题的左侧）有问题。它适用于 Firefox 和 chrome。

这是标记：

<div class="header-container">
        <div class="wrapper">
            <div class="logo"> <img src="/images/Tiny-Wolf-Logo-ICN.png" alt="Tiny Logo" width="120px" height="120px">
            </div>
            <div class="title">Tiny Wolf
            </div> 
            <div class="tagline">Visual Storytellers
            </div>
        </div>
   </div>

我已经测试过这是否是 CMYK 问题，但不是。我还声明了宽度和高度，但图像仍然没有出现。

【问题讨论】：

在控制台中查看它似乎正在使用 CSS 中的这一行：/*@media only screen and (min-width:600px)*/ .logo { display: none; }

标签： html css image internet-explorer

【解决方案1】：

如果你提到 css/main.css 行号。 242

@media only screen and (min-width: 600px) {           

    .logo { display: none;}
}

所以只有徽标不会显示在 IE 浏览器中。你问为什么如果显示其他浏览器？

答案是你写 css/main.css line-no。 73

.logo {
    display: inline-block;
}

只需将 !important 放在这个地方，例如：

.logo {
    display: inline-block !important;
}

它显示得很好。

【讨论】：

【解决方案2】：

您只需在main.css. 的第 74 行添加一个 !important 就像这样：

display: inline-block !important;

所以，在任何 IE 中你都会看到 PNG。

【讨论】：

图像将显示，但这会破坏页面的布局。当我添加此图像时，图像不会内联显示（它显示在徽标上方）并且徽标的媒体查询不起作用。（尽管这些之前也不起作用 - 请参阅宽屏与平板电脑/手机上的 chrome 或 firefox 以了解如何这应该看起来）
可能是因为您使用了 2 个不同的 div。一个带有logo 类来显示徽标，一个带有title 类来显示标题。尝试将它们仅放在 div 中。这使得页面不会中断。