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

html - 嵌套的固定元素在IE中不起作用,第1张

我正在尝试将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拉出来但是在我的情况下我不能。

HERE A JSFIDDLE与我的实际情况类似

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

中拉出来

添加图片以说明问题:

html - 嵌套的固定元素在IE中不起作用,enter image description here,第2张

html - 嵌套的固定元素在IE中不起作用,enter image description here,第3张

最佳答案:

1 个答案:

答案 0 :(得分: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/

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复