html - 固定位置 DIV 在 Chrome 和 Safari 中工作正常但在 IE11 中不工作

标签 html css fixed

此 CSS 使按钮锚定在我们网站屏幕的底部。向上或向下滚动时,该按钮会固定在页面底部。在 IE 中,它只是将按钮呈现在 DIV 代码所在的位置,而不是将其 float 并将其锚定到浏览器的底部。 Chrome 和 Safari 都在浏览器窗口的右下方显示该按钮。我浏览了几篇文章并尝试了不同的 CSS 设置,但似乎无法得到它。任何帮助将不胜感激。谢谢!

<style type="text/css">
    div[id="bottomButton"] {
        position: fixed;
        bottom: -20px;
        right: 45px;
        border: none;
        z-index: 50;
        border-color: transparent;
        width: inherit;
    }
</style>

最佳答案

您的代码中缺少 HTML 文档类型。试试下面的代码。

<!DOCTYPE html>
<html>
<head>
<script>
</script>
<style type="text/css">
    #bottomButton {
        position: fixed;
        bottom: -20px;
        right: 45px;
        border: none;
        z-index: 50;
        border-color: transparent;
        width: inherit;
    }
</style>
</head>
<body>
<div id="bottomButton">
<button>mybutton</button>
</div>

</body>


</html>

关于html - 固定位置 DIV 在 Chrome 和 Safari 中工作正常但在 IE11 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24828887/

相关文章:

javascript - jPlayer + 自定义控件 + 相对父级 = 没有全屏?

javascript - 使用 Leaflet 在弹出内容中添加图像

html - 固定在 div 中的视频

html - 修复移动 safari 中的定位/z-index 问题

javascript - 通过滚动使固定工具提示消失

javascript - keydown 事件是如何工作的?

html - 为什么人们继续使用 "text/css"?

javascript - 使用 CSS3 双指缩放

javascript - 在 HTML 中构建一个巨大的 div 二维网格

javascript - 在 onMouseOver() 上操作 innerHtml