firefox上的第n个孩子

时间:2014-09-10 01:02:37

标签: css3 firefox css-selectors

在这个网站上:

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中,而是在对同事的机器进行随机测试时发生了这件事)。该网站明天将上线到大学。

耶,

吉尔

1 个答案:

答案 0 :(得分:0)

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

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

FF 3.6

enter image description here


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

enter image description here

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

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

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

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

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