css - ie6 修复需要背景。需要一个解决方法

Question

尝试在我的网站上实现这个画廊。

http://coffeescripter.com/code/ad-gallery/

css 文件中指出，除非将不存在的背景图像应用于 .ad-gallery .ad-image-wrapper .ad-prev, 否则下一个和上一个按钮不会显示在 IE6 中。广告库 .ad-image-wrapper .ad-next。他们使用的代码无效，但有效。我也尝试过使用一种颜色来代替，它确实有效，但不是我想要的。

如果可能的话，我不想指向不存在的图像文件或 blank.gif。有谁知道在 IE6 中导致此问题的原因以及是否有纯 css 解决方法？ zoom: 1 在这种情况下不起作用。

Answer 1

我假设您的 IE6 要求是指来自 jQuery AD Gallery 的以下片段插件的样式表，jquery.ad-gallery.css :

.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
      /* Or else IE will hide it */
      background: url(non-existing.jpg)\9;
    }

背景速记规则末尾的 \9 实际上是针对 IE6、IE7 和 IE8 的 CSS Hack — 而不仅仅是 IE6。

Note: Paul Irish wrote a Comprehensive List of Browser-Specific CSS Hacks back in 2009 which highlighted this attribute parsing bug in IE/Win:

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

如果您不想为 IE 使用 1 像素透明 spacer.gif 或 不存在的文件(这会引发 404 错误)，只需修改CSS 以重新使用图库中的现有图像之一，但将背景位置的 X 和 Y 属性指定为不在屏幕上:

.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
    /* Or else IE will hide it */
    background: url(ad_next.png) no-repeat -9999px -9999px\9;
}

这一创意工作将允许 IE 6-8 显示上一个和下一个链接，但实际上不会显示指定的背景图像文件，因为 X 和 Y 值将背景完全定位在屏幕之外。