Question

我正在尝试在Facebook标签页中使用简单的CSS精灵进行基于图像的翻转，背景图片正被Facebook剥离。需要说明的是，此问题仅发生在标签页面内，而不是主应用程序本身。

Facebook在剥离背景图像时似乎也非常挑剔 - 应用于锚标记的背景图像被删除，但背景图像应用于列表元素包含锚保持不变。

例如，给定标记：

<li><a href="http://some/destination.html" target="_top"><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></a></li>

以下CSS将成功地将背景应用于列表元素：

li {
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

但Facebook上剥离了应用于子锚标签的相同CSS：

li a {
    background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

Facebook实际上是否能够在标签内支持基于图像的翻转，如果是，那该怎么办？

Answer 1

通过反复试验发现了一种解决方案，虽然它涉及无效堆叠的HTML并且看起来很讨厌。

修改标记，使div 在锚标记内

<a href="http://some/destination.html" target="_top"><div><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></div></a>

并将背景图片应用于 div 而不是锚点：

li a div {
   background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}

然后您可以像这样应用背景偏移：

li a:hover div { background-position: 0 -43px; }

它确实有效，但如果有人能提出建议的话，我更倾向于一个不太讨厌的解决方案。

Facebook标签页内的图像翻转

1 个答案: