IE8固定位置顶部&底部调整大小错误

发布于 2024-12-07 03:38:48 字数 416 浏览 1 评论 0原文

基于我的 CSS，包括 IE7 在内的所有浏览器都始终显示我的底部栏正确且固定。

.bottom-fixed {
    position: fixed;
    bottom: 0;
    margin-left: -235px;
    min-width: 1160px;
    max-width: 130em;
    width: 100%;
}

然而IE8有一些奇怪的地方。如果您借助底部的右角调整浏览器窗口的高度（可以同时更改窗口宽度和高度的方式），一切都很好。

但是，如果您调整浏览器窗口顶部或底部的窗口高度大小，则 bar/div 会卡在该位置，就像位置为绝对而不是位置：固定时一样。

知道如何解决这个问题吗？

（使用适用于 HTML5 的 Doctype）

原文

Based on my CSS, all Browsers including IE7 show my bottom bar correct and fixed, all the time.

.bottom-fixed {
    position: fixed;
    bottom: 0;
    margin-left: -235px;
    min-width: 1160px;
    max-width: 130em;
    width: 100%;
}

However there is something strange in IE8. If you resize the browser window height with help of your right corner at the bottom (the way you can change a windows width and height at the same time), all is fine.

But if you resize the window height grapping the top or bottom of your browser window, the bar/div stuck at the position like it would when position was absolute instead of position: fixed.

Any idea how to fix that?

(Using Doctype for HTML5)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岛歌少女 2024-12-14 03:38:48

我无法使用此线程 Umer 提到。

所以我用一个简单的 Javascript 脚本修复了它，该脚本在窗口调整大小时始终应用位置：固定。

HTML

<!--[if IE 8 ]>
    <script type="text/javascript">
        $(window).resize(function () {
            ApplyPositionFixed();
        });
    </script>
    <![endif]-->

Javascript

function ApplyPositionFixed() {
    // Check if element exists
    if ($("#bottom-bar-content").length) {
        $(".bottom-fixed").attr('style', 'position: fixed;');
        console.log("Window resized");
    }
    else {
        console.info("No element changes on Window resize");
    }
}

但是。我已经准备好接受更好的解决方案。

I couldn't fix that with the parent float solution from this thread Umer mentioned.

So I fixed it with a simple Javascript script which applies position: fixed all the time when the window gets resized.

HTML

<!--[if IE 8 ]>
    <script type="text/javascript">
        $(window).resize(function () {
            ApplyPositionFixed();
        });
    </script>
    <![endif]-->

Javascript

function ApplyPositionFixed() {
    // Check if element exists
    if ($("#bottom-bar-content").length) {
        $(".bottom-fixed").attr('style', 'position: fixed;');
        console.log("Window resized");
    }
    else {
        console.info("No element changes on Window resize");
    }
}

However. I'm ready for better solutions.

回复收藏 0 原文

我不是你的备胎 2024-12-14 03:38:48

还有另一种解决方案：在父元素上显式设置 height 。例如高度：1% 或高度：100%。

回复收藏 0 原文

反话 2024-12-14 03:38:48

遇到了同样的问题，但我的解决方案是父级具有 position:relative。一旦我删除了它，这个问题就消失了。

回复收藏 0 原文

救星 2024-12-14 03:38:48

对于 IE 8 中的固定位置 - ，
DOCTYPE非常非常重要。

其中之一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

或

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

或

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

或

<!DOCTYPE HTML>

非常非常重要的是
那些在第一线的人。

for fixed position in IE 8 - ,
DOCTYPE is very very important.

one of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML>

And its very very important that
those be in first line.

回复收藏 0 原文

~没有更多了~

关于作者

孤独患者

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

IE8固定位置顶部&底部调整大小错误

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

IE8固定位置顶部&底部调整大小错误

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。