firefox上的第n个孩子

Question

在这个网站上：

http://c3.finearts.txstate.edu

我使用以下方式设置右侧边栏导航：

---

.sidenav a:after {
    display: block;
    position: relative;
    z-index: 0;
    top: -3.6em;
    left: 0.15em;
    width: 90%;
    content: ".";
    font-family: 'Ropa Sans', helvetica, arial, sans-serif !important;      
    font-size:1.5em;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0.7em;
    margin-bottom:1.16em;
    background-color: rgba(51,50,48,0.9);
    background-image: url('http://uweb.txstate.edu/~j_f166/codepen/images/notch.png');
    background-position: top right;
    background-repeat:no-repeat;     
}

.sidenav a:nth-child(n+2) li{
  margin-top: -4.4em;
}

---

在Firefox 3.6.17中，它呈现如下：

http://www.browserstack.com/start#os=Windows&os_version=7&browser=Firefox&browser_version=3.6&zoom_to_fit=true&url=http%3A%2F%2Fc3.finearts.txstate.edu&resolution=1024x768&speed=2

（加载只需要一点时间......我是新手，所以我无法发布截图）。

虽然根据caniuse 应该从3.5开始支持这些伪类。

作为一个额外的麻烦，我正在使用我们大学的内容管理系统。它是一个木兰系统。我99％肯定我无法改变头部来插入javascript。

所以有三个问题：

我可以使用css修复程序来使这些伪类在这个和附近的Firefox版本中运行吗？

是否有填充物？

如果是这样的话，我可以在哪里插入这样的polyfill，因为我无法访问html头？

非常感谢。当然我只是注意到了这一点（它没有出现在BrowserShots中，而是在对同事的机器进行随机测试时发生了这件事）。该网站明天将上线到大学。

耶，

吉尔

Answer 1

我认为这个问题与Firefox 3.6有关，不喜欢你在ul标签里面的锚点里面有li标签，而不是你的CSS。它似乎试图自动修复你的标记结构，然后打破你的CSS。

看看FF 3.6的以下屏幕截图，你会发现你的锚标签正在重复：

FF 3.6

---

现在看一下Chrome中的这个屏幕截图，我重新创建了FF 3.6渲染的错误标记：

铬

这可能是您的CMS如何为FF 3.6提供标记的问题，但我对此表示怀疑。我的钱是在FF看到非语义标记并试图为你“修复”它。

如果你必须保留你正在使用的标记，那么你可以尝试为firefox 3.6寻找CSS hacks，甚至使用像WhichBrowser这样的浏览器嗅探库。

但是，我建议调整你的CSS以使用看起来更像这样的标记：

<ul>
    <li>
        <a href=""></a>
    </li>
</ul>

如果某些浏览器没有按照预期的方式进行组织，那么它会尝试为您“修复”您的标记，并且这种结构更具语义性。