Facebook 标签页内的图像翻转

Question

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

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;
}

但应用于子锚标记的相同 CSS 被 Facebook 删除：

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; }

：确实有效，但如果有人能提出建议，我宁愿选择一个不那么麻烦的解决方案。