Question

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

Answer 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 Image Sprites无法在IE 11中运行，但在chrome中可以正常运行

1 个答案: