Question

URL片段如何与CSS交互？我有一个页面，说：http://example.boom/is_this_a_bug.html。该页面的代码显示在https://gist.github.com/3777018

中

当我使用这样的网址加载页面时，.tab-pane元素未显示，因为它们溢出了容器，并且它具有overflow: hidden属性。

但是，如果我通过在网址上附加有效的片段（#00）来加载页面，那么.tab-pane就会显示，就像left:100%没有被考虑在内一样。按下按钮只会移除并重置left:100%，然后我会看到溢出的制表符。

在Firefox 15.0.1和Chromium 18.0.1025.168（Developer Build 134367 Linux）Ubuntu 12.04中都会发生这种情况。

为什么会发生这种情况？这是一个错误，还是在别处记录？

致以最诚挚的问候，

曼努埃尔。

Answer 1

当您在URL中加载带有片段标识符的页面时，如果该片段标识符与页面上元素的ID匹配，则浏览器将滚动页面以使该元素进入视图。

Answer 2

替代方案可以使用javascript应用样式。

(function hashStyle() {

    if (window.location.hash == '#COLOR') {
        var css = document.createElement('style'),
            s = document.getElementsByTagName('script')[0],
            styles = 'body { background-color: #b0c4de; }';

        css.type = 'text/css';

        if (css.styleSheet) {
            css.styleSheet.cssText = styles;
        } else {
            css.appendChild(document.createTextNode(styles));
        }
        s.parentNode.insertBefore(css, s);
    }
})();

URL片段（#stuff）如何与CSS交互？

2 个答案: