修复了 Android 上的元素出现在屏幕外的问题
我有一个底部固定的页脚：0。它工作正常，除了在 Android 上它出现在屏幕下方。我还有一些其他固定元素也出现在屏幕外。由于某种原因，我无法将它们包含在屏幕中，我已经四处搜索并尝试查看内容，但没有任何乐趣。我的猜测是，如果我更改视口中的某些内容，它就会修复它。该图像是从 S4 上模拟该网站的 google chrome 获取的，但在我的实际手机上也存在同样的问题。页脚的代码应该让它位于底部，并且在其他浏览器中工作正常。我可以将底部的值更改为 26px 左右，然后整个页脚在屏幕上可见，但这不是我想要的修复。有任何想法吗？
.footer-fixed{
position: fixed;
bottom: 0;
z-index: 99;
width:100%;
background-color: #111;
height: 50px;
}
我以前遇到过这个问题，但仅限于低于 4.4 的 Android 版本，所以也许你可以告诉我你正在使用哪个 Android 版本，
尝试添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>
给你的
<head></head>
在 Android < 2.3 设备上，固定元素的行为为“静态”（这就是为什么您的顶部元素可以正常运行，因为它是第一个元素并将其余元素向下推）
Android 2.3 支持它，但你需要禁用视口缩放，因为我认为 Bradfrost 写过一次，但记不清了，那是不久前的事了
如果您遇到元素闪烁的情况，请尝试添加
-webkit-backface-visibility: hidden;
到你的 css 类，或者甚至扩展它
-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.
-webkit-perspective: 1000;
它解决了闪烁问题，但问题是在某些 Android 版本上，您只需要添加隐藏的背面可见性，以及其他 2 条规则（试验和错误）。我应该选择第一个（一开始），因为添加翻译 3d 会消耗更多电池
无论如何，如果它只是一个网站，请尝试上面的解决方案，
如果您正在制作 cordova 应用程序，请尝试添加https://crosswalk-project.org/，将其自己的 webview 添加到您的 cordova 包中，以解决 Android 上的所有这些浏览器怪癖。
——旁注
当一个元素的位置固定时，它的显示将被设置为块，并且您的元素上有 width: 100% ，所以如果您不使用 box-sizing:border-box; 该元素的宽度为 100% + 填充 + 添加了边距，我不知道你的 css 的其余部分，也许你正在通过容器类设置边距或填充（使用 chrome 检查元素的指标）检查员）
如果是这种情况，您可以做两件事来更改显示
width: 100% to auto;
或添加： http: //www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: -webkit-box-sizing: border-box;
或者将标准化：https: //necolas.github.io/normalize.css/添加到您的项目中，位于您自己的 css（链接标记）上方（Normalize.css 使浏览器更一致地渲染所有元素并符合现代标准） .它精确地只针对需要规范化的样式。）
| 归档时间： |
|
| 查看次数： |
1302 次 |
| 最近记录： |