时间戳

首页 > 解决方案 > CSS Image Sprites 在 IE 11 中不工作，但在 chrome 中工作正常

html - CSS Image Sprites 在 IE 11 中不工作，但在 chrome 中工作正常

问题描述

我的 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 中看不到图像。请指导我。谢谢 ：）

标签： htmlcssjspspritecss-sprites

解决方案

您可能需要添加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

推荐阅读