Question

考虑这个JSFiddle的HTML页面：http://jsfiddle.net/rb8rs70w/2/

它有一个＆＃34;粘性＆＃34;通过CSS标题＃39; position: absolute。

...
<body class="body-menu-push">

    <header role="banner">
        <a href="#" class="menu-toggle" id="show-menu">Menu</a>
        <h1 class="logo"><a href="/">Site Title</a></h1>
    </header>

    <nav class="menu" id="main-menu">
        <ul>
            <!-- menu items here -->
        </ul>
    </nav>

    <article class="content">
        <!-- page content here -->
    </article>
</body>
...

这里是CSS：

* {
    margin: 0;
    padding: 0;
}
header[role="banner"] {
    height: 70px;
    font-size: 20px;
    line-height: 70px;
    border-bottom: 2px solid #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
}
.menu-toggle {
    display: block;
    position: absolute;
    left: 20px;
}
.logo {
    font-size: 20px;
    float: right;
    margin-right: 30px;
}
.menu {
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    left: -200px;
    z-index: 1010;
    background-color: #eee;
}
.menu.menu-open {
    left: 0px;
}
.body-menu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
body.body-menu-open {
    left: 200px;
}
.content {
    width: 400px;
    margin: 120px auto;
}

点击＆＃39;菜单＆＃39; link从左侧打开一个推送菜单（#main-menu）（最初隐藏），页面的其余部分被推到右侧。点击＆＃39;菜单＆＃39;再次链接将使推送菜单消失，并且页面返回其原始位置。

它在Firefox（v31）和IE（v9）中运行良好，但在推出菜单时，在Chrome（v36.0.1985.143 m）上，＆＃39;菜单＆＃39;链接消失（可能是因为绝对定位的标题没有被推到右侧）。一个有趣的事情是，如果我调整Chrome窗口的大小（重新绘制内容，我猜？），＆＃39;菜单＆＃39;链接重新出现（即，标题被正确推送到右侧），并且再次单击它会使推送菜单消失（并且页面内容的其余部分也会回到其原始位置），粘性标题仍然被推到右边。

有人可以指出在Chrome中可以/可以做些什么来解决这个问题吗？

Answer 1

使用

body.body-menu-open {
    margin-left: 200px;
}

而不仅仅是左：200px;这应该在Chrome中修复

工作小提琴：http://jsfiddle.net/rb8rs70w/3/

绝对定位的标题不喜欢在Chrome中推送

1 个答案: