css - 什么会导致图像替换类仅在 IE7 中失败？

Question

我正在尝试将 HTML5 样板系统 (http://html5boilerplate.com/) 用于客户的网站，但是当网站是在某些浏览器和某些设备上查看。即 IE7 和一些(或全部)Blackberries，基于我的反馈和测试。在这些情况下，设计的主要导航和其他元素不会出现/不可导航。客户是一家为大型商业区提供服务的餐厅，因此不幸的是，他们的大量潜在客户和客户仍在使用 IE7 的公司系统上，无法按原样使用该网站。

这是相关页面的链接:
www.vb3restaurant.com

vb3restaurant.com/index-pizza.html

这是我认为是问题所在的 .ir 类(尽管它可能是其他东西):

.ir { 显示: block ；边界:0；文本缩进:-999em；溢出:隐藏；背景颜色:透明；背景重复:不重复；文本对齐:左；方向:ltr； *行高:0；

如果有人能指出正确的方向，告诉我什么是“破坏性的”或更好的/跨浏览器/IE 友好的方式来完成这个设计，我将不胜感激，包括图像替换或其他技术。

无论如何我都不是专业程序员，但我已经建立了一些网站并使用了一些不同的框架、CMS 等。我试图在这个网站和其他地方寻找答案，所以我很抱歉如果我遗漏了一个明显的线索来回答这个问题，或者我在错误的地方或不正确地提出了这个问题，请继续前进。
当然 - 提前感谢您的时间和帮助!

最好的，AB

Answer 1

ir 类使用 text-indent:-999em 隐藏内容(改进:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)。

但替换这些元素的图像具有新的 nth-child 选择器，IE7 或 IE8 无法识别:http://kimblim.dk/css-tests/selectors/ .不幸的是，这些浏览器中的渲染引擎早于 nth-child 选择器。

您可以编写一个 jQuery shim 来修补您的选择器:http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere .或者为所有浏览器重写您的选择器，为菜单项提供 ID 或类名。

很烂吧？好吧，有些人认为图像替换! (特别是对于低带宽移动设备)所以...您也可以忘记使用 IE7/8 的图像替换，使用特定于 IE 的样式表来设置纯文本的样式。