粘页脚奇怪的 IE11 行为答案

【问题标题】：Sticky footer weird IE11 behavior粘页脚奇怪的 IE11 行为
【发布时间】：2015-11-10 23:55:49
【问题描述】：

这个小提琴试图复制我最近遇到的问题。因此，我为凌乱的代码道歉，因为它是一个更大的项目的裂痕。

fiddle:

https://jsfiddle.net/kfh3ah4q/4/

问题在于这段代码在 IE11 中的行为与在其他 Firefox/Chrome 中的行为不同。

紫色部分代表粘性页脚，当您滚动到页面底部时会显示该页脚。在 IE 中，这个紫色块的行为不正确或者根本不可见。

我应该怎么做才能解决这个问题？

【问题讨论】：

我很确定你的 clearFix 课程搞砸了。但是，我不会冒险编辑，因为我不确定您希望从该课程中获得什么结果。
我认为 .clearfix:after { content: "";显示：表格；明确：两者； } 是清除修复的正确方法。我希望找出在这种情况下 IE 的行为与其他浏览器不同的原因。
但是你是对的，我测试过了。有什么办法吗？我现在需要 clearfix 类。
，因为__________。（？）如果您只是将它放在很多地方，因为它“似乎可以解决随机问题”，那么您可能想要研究这些问题的原因。我在你的 CSS 中没有看到任何浮动，所以我认为你并不像你想的那样需要它。

标签： html css internet-explorer

【解决方案1】：

 <body style="overflow:scroll;">  

<div class="main clearfix">



  <div class="content contentclosed clearfix">
    <div class="maincontent clearfix" style="position:absolute;">


      <div id="main">

        <section id="znalosti">

                sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text

       </section><!-- end #znalosti -->
      </div><!-- end #main -->
    </div>
    <div class="footer clearfix" style="position:relative;">
        <div class="container">
            <br>&nbsp;</br>
            <p>
            sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text<br>sample text
                </p>
        </div>
    </div>       
  </div>

</div>


</body>

我将溢出滚动添加到正文，位置：绝对到主要内容。将页脚内容包装在 p 中，并在顶部添加换行符，并相对于页脚定位。您可以在 HTML 中内联查看我的更改。那行得通，但所有这些事情可能都不是必需的。我不是 100% 确定您要完成什么，但我希望这会有所帮助。

当我添加“溢出：滚动；最小高度：2000px；”时它起作用了到你的 IE 中

【讨论】：

我将您的代码添加到 fiddle 但它在 IE 甚至其他浏览器中都不起作用:(
你确定你做对了吗？我刚刚将它粘贴到你的 HTML 上，它对我有用。
滚动时查看紫色 div 中的文本。我的留在原地，你的在移动。
哦，我想我明白了。您希望页脚中的某些文本保持隐藏状态。我以为你不希望它像那样定位在 div 后面。你能详细说明你想要它做什么吗？在再次弄乱小提琴之前，我想了解 100%。
我现在只想让 IE 表现得像 chrome 或 firefox。