我正在尝试将 HTML5 Boilerplate系统（http://html5boilerplate.com/）用于客户的网站，但是当我的网站使用内置的.ir类时遇到问题在某些浏览器和某些设备上查看。 即 IE7 和一些（或所有）黑莓基于我的反馈和测试。在这些情况下，设计的主要导航和其他元素不会出现/无法导航。 客户是一个迎合大型商业区的餐厅，所以不幸的是，他们的潜在客户和客户仍然在使用IE7的公司系统上，并且无法按原样使用该网站。
以下是指向相关网页的链接：
www.vb3restaurant.com
vb3restaurant.com/index-pizza.html
以下是我认为是问题的.ir类（虽然可能是其他问题）：
.ir {display：block;边界：0; text-indent：-999em;溢出：隐藏;背景颜色：透明; background-repeat：no-repeat; text-align：left;方向：ltr; * line-height：0; }
如果有人能够通过图像替换或其他一些技术指出我正在朝着正确的方向指出什么是“打破”或更好/跨浏览器/ IE友好的方式来完成此设计，我将非常感激。
我不是一个专家程序员，但我已经建立了一些网站并使用了一些不同的框架，CMS等等。我试图在这个网站和其他地方寻找答案，所以我在道歉如果我错过了一个回答这个问题的明显线索，或者我在错误的地方或不正确地问过它，请提前 当然 - 提前感谢您的时间和帮助！
最佳， AB
答案 0 :(得分：1)
ir类隐藏了text-indent:-999em内容（改进：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/）。
但替换这些项目的图像具有IE7或IE8无法识别的新nth-child选择器：http://kimblim.dk/css-tests/selectors/。遗憾的是，这些浏览器中的呈现引擎早于nth-child选择器。
您可以编写一个jQuery填充程序来修补您的选择器：http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere。或者为所有浏览器重写选择器，给出菜单项ID或类名。
糟透了吗？好吧，有些人认为图像替换！ （特别是对于低带宽移动设备）所以...你也可以忘记使用IE7 / 8的图像替换使用特定于IE的样式表来设置纯文本的样式。
答案 1 :(得分：0)
我怀疑是这条规则：
#mainNav ul li:nth-child(1) a {
display: block;
background-image: url(../images/home-nav-test.png);
background-repeat: no-repeat;
background-position: 40px -35px;
}
改为在每个导航项上使用类。