IE8 上未显示图像 - 与宽度属性有关？

Posted 2023-03-06

【中文标题】IE8 上未显示图像 - 与宽度属性有关？

【英文标题】：Images are not showing up on IE8 - Related to width property?

【发布时间】：2014-11-06 20:40:34

【问题描述】：

我在 GunsAmerica.com 上工作，一些使用 IE8 的用户注意到（非常厌恶）图像没有显示在我们的列表中。我正在使用 Browserstack.com 进行测试并可以确认行为。可以在首页看到问题http://www.gunsamerica.com

这是图片的 CSS：

    .listing-thumb img, .listing-thumb > a > img 
      height:auto;
      width: 170px;
      display:inline;
      max-width: 100%;
    

这是一个列出图片 html 的示例：

<div class="listing-thumb">
            <a href="/945864089/CSC_ARMS_Elite_Model_2014_5_56_223_1.htm"  elite="" model"="" 2014="" 5.56="" .223="" 16""="" title="CSC ARMS " class="sr_image"><img itemprop="image"  elite="" model"="" 2014="" 5.56="" .223="" 16""="" src="/UserImages/142343/945864089/wm_md_6737932.jpg"></a><br>

        </div>

“sr_image”类没有做任何事情，所以尽量忽略它。

据我所知，它应该可以工作。任何可以提供帮助的人将不胜感激。

【问题讨论】：

用IE8访问时页面默认使用什么浏览器模式和文档模式？ （调出F14开发者工具看看）

兼容性视图实际上使图像出现......但在设计上打破了更多的废话而不是它的价值。这是元数据：

哎呀，你去

Pierce，了解 IE 选择的浏览器模式和文档模式会很有帮助，因为它可能与您在 HTML 中指定的不同。

嗨，Mason，很抱歉造成混乱 - 浏览器模式：IE8 文档模式：IE 标准

【参考方案1】：

也许这行得通

<!--[if lt IE 8]>
<style type="text/css">
    a img  display: inline; 
</style>   
<![endif]-->

【讨论】：

感谢您的建议...这仍然无法正常工作：\

【参考方案2】：

使网站与 IE8 兼容的解决方案将是暂时的，因为无论如何微软都会摆脱它。

查看以下链接，了解如何解决问题：

http://www.codeproject.com/Articles/310368/Make-Site-Compatible-to-IE-IE-IE-and-IE

【讨论】：

虽然微软可能会停止对 IE8 的支持，但这并不意味着所有用户都会升级。事实上，对于该站点的目标受众来说，他们实际上很有可能仍然会使用不受支持的 IE 版本。因此，仅仅希望问题消失并不是一个有效的解决方案。

我知道这是暂时的，我希望他们尽快杀掉它！与此同时，每月有 80k 用户使用 IE 8 网站，所以我仍然需要帮助他们。

我也在寻找解决方案的代码项目......不幸的是，我已经消除了许多建议。如果有人有任何见解，那将非常有帮助

【参考方案3】：

好的，伙计们，它现在正在工作。问题似乎是 将其包围的 div 的宽度属性与“listing_thumb”类。这显然需要设置宽度，因为内部没有提供容器宽度信息（需要静态 px 宽度）。

发件人：

.listing-thumb 
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;

收件人：

.listing-thumb 
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
width: 170px;

所以你有它的人。如果您已经用尽了所有其他可能性，请确保所有封闭容器都具有支持内部 html 的宽度属性。