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

我试图将一个

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>

我固定在铬，FF

为什么不在IE中

当我在Chrome和FF

element fixed

stay

fixed

中滚动页面时，但在IE中它也会滚动，我想这不应该发生，因为

fixed

元素在文档流之外

我试着从

内容

中取出它，但没有成功，从

包装器中取出它修复了

但我不能

与我的真实情况相似

那么，为什么会发生这种情况，以及如何在不将其拉出包装器的情况下修复它

添加图像以说明问题：

---

---

选项1

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

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

小提琴-

选项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>

---

Fiddle-

我无法用IE11重现您的问题。哪个版本提供了这种行为？我在IE9中尝试过，它在那里也能正常工作。编辑：即使在IE8中。从IE7开始支持（但需要DTD）。你是在怪癖模式下运行页面吗？@Teemu我的浏览器是IE 11.0.9600.16384哦！当小提琴太窄以至于圆角矩形部分落在视口外时，它会保持固定。只有当你把小提琴调得足够宽时，它才会随着段落滚动。这就是为什么一开始我没有看到虫子！这在IE11中发生，但在IE9中不发生。（这里没有IE10要测试。）你应该提交一个bug报告。如果OP想要修复，为什么

absolute

？修复的包装器的父项是主体。这使得它的行为非常类似于fixed。事实上，我可以看到OP的fiddle（我的浏览器是IE 11.0.9600.17842）的问题。是的，它可以工作，但相信我，在我的情况下，我不能改变位置：固定在包装中，无论如何，谢谢。再次感谢您的兴趣，但我在问题中指定：“如何在不将其从包装中拉出的情况下修复它？”

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