嵌套的固定元素在IE中不起作用

Question

我试图将一个fixed元素放在另一个fixed元素中

<div class="wrapper-fixed">
    <div class="content">
        <div class="element-fixed">
            <p>I'm fixed in Chrome, FF</p>
            <p>Why not in IE ?</p>
        </div>
    </div>
</div>

当我滚动页面在Chrome和FF element-fixed的逗留fixed,但在IE它滚动太,我想这不应该发生,因为一个fixed元素是文档流之外.

我尝试将它拉出来content但没有工作,把它拉出来wrapper-fixed但是在我的情况下我做不到.

这里有一个类似于我的真实情况的JSFIDDLE

那么为什么会发生这种情况以及如何解决它而不将其拉出来 wrapper-fixed

添加图像来说明问题:

---

Answer 1

选项1

将包装位置更改为绝对位置

.wrapper-fixed{
    position: absolute;
    ...

小提琴 - http://jsfiddle.net/za4hdmpf/

选项2

不适合，因为这需要一个不涉及将元素固定从包装固定中拉出的解决方案。

更改标记并对固定元素进行位置调整

<div class="wrapper-fixed">
    <div class="content">
        <p>Content</p>        
        <p>Content 1</p>        
        <p>Content 2</p>
        <p>Content 3</p>        
        <p>Content 4</p>
        <p>Content 5</p>        
        <p>Content 6</p>
        <p>Content 7</p>   
        <p>.</p>  
        <p>.</p>  
        <p>.</p>  
    </div>
</div>

<div class="element-fixed">
    <p>I'm fixed in Chrome, FF</p>
    <p>Why not in IE ?</p>
</div>

CSS

.element-fixed{
    position: fixed;
    width: 170px;
    border-radius: 10px;
    top: 70px;
    left: 50%;
    margin-left: -290px;
    background-color: #fff;
}

小提琴 - http://jsfiddle.net/vuykwu76/