CSS Image Sprites 在 IE 11 中不工作，但在 chrome 中工作正常答案

【问题标题】：CSS Image Sprites not working in IE 11 but working fine in chromeCSS Image Sprites 在 IE 11 中不工作，但在 chrome 中工作正常
【发布时间】：2018-08-08 07:23:39
【问题描述】：

我的 CSS 是这样的

.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_256x240.png); }
.ui-widget-content .ui-icon {width: 16px; height: 16px; background-image: url(images/ui-icons_256x240.png); }
.ui-widget-header .ui-icon {width: 16px; height: 16px; background-image: url(images/ui-icons2_256x240.png); }

为了定位，我正在使用这个

.ui-icon-closethick { background-position: -96px -128px; }

我的jsp是

<a href="#" class="..."><span class="ui-icon ui-icon-closethick" unselectable="on"></span></a>

这在 chrome 中运行良好，但我在 IE 中看不到图像。请指导我。谢谢:)

【问题讨论】：

你能发布一个小提琴来展示你的问题吗？您也可以参考w3schools.com/css/tryit.asp?filename=trycss_sprites_img了解详情。
我分享的代码适用于 Chrome，但不适用于 IE。那是我的问题。谢谢

标签： html css jsp sprite css-sprites

【解决方案1】：

您可能需要将display: inline-block 添加到跨度（或类）。

编辑： 在这里工作——示例代码：

<!DOCTYPE html><html lang="de"><head>
<style>
.ui-icon { width: 16px; height: 16px; background-image: url(ui-icons_256x240.png); display: inline-block; }
.ui-icon-closethick { background-position: -96px -128px; }
</style></head>
<body>
    <a href="#"><span class="ui-icon ui-icon-closethick" unselectable="on"></span></a>
</body></html>

使用此 PNG：Sample Sprite

适用于 Chrome、IE11、Edge。

EDIT2：Imgur 链接结果：https://imgur.com/a/JkEdOiy

【讨论】：

我将我的 css 更改为 .ui-icon { width: 16px;高度：16px；背景图像：url（图像/ui-icons_469bdd_256x240.png）；显示：内联块；仍然它没有显示在 IE 上
其他两个班级也一样
感谢您的回复。我添加了内联块，除此之外我没有看到代码之间有任何不同。默认情况下，我的 IE 11 以文档模式 8（在开发人员工具中找到）打开。将文档模式更改为 8/9/10/edge。仍然面临同样的问题。
!DCOTYPE 指令应该强制 ie11 在边缘模式下打开。在选项卡中更改开发工具中的模式后，此设置将变为手动
还有一个 PS：问题是 SPAN 默认为 display:inline 且没有内容的宽度为零（即使您添加了 CSS 宽度属性）。将显示设置为内联块，跨度变为实际宽度 => 出于调试目的，您可以添加 background-color: red 或类似的东西来检查跨度是否实际可见并且大小为 16x16