Html 修复了Firefox Android上元素移动/跳跃的问题
我有一个固定的横幅在我的网站底部。这是它的样式Html 修复了Firefox Android上元素移动/跳跃的问题,html,css,firefox,Html,Css,Firefox,我有一个固定的横幅在我的网站底部。这是它的样式 #mobile-cookie-policy { position: fixed; bottom: 0; width: 100%; height: 70px; text-align: center; background-color: #f7f7f7; border-top: 1px solid #ddd; z-index: 1; padding-bottom: 10px; }
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
以及元素本身
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our <a href="#">use of cookies</a></p>
</div>
✕;
通过使用我们的网站,您同意我们的
出于某种原因,在FirefoxAndroid上,固定横幅不起作用,到处都是。它的默认位置也稍微不可见。我不明白为什么
下面是一个演示:
编辑:奇怪的是,我发现当工具栏设置为底部时,它在Firefox上工作,但当工具栏设置为顶部时,它不工作
EDIT2:我试着一个接一个地删除页面上的所有其他元素,但在任何情况下都没有帮助
EDIT3:我还发现禁用“滚动隐藏工具栏”可以使其按预期运行
编辑4:我对这个简单的网站也有同样的问题
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
#主要{
高度:3000px;
}
#固定的{
背景色:红色;
底部:0;
位置:固定;
宽度:100%;
高度:70像素;
}