Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

margin-top 百分比在 Android 上的坑

  垂直方向 margin 和 padding 的百分比取值本应该是根据容器宽度来计算的。虽然最初我觉得这个设定有点诡异,然而一旦接受了这种设定就会觉得一切都是理所当然的。渐渐地,越来越依赖这个设定来布局,直到我的膝盖在 Android 上中了一箭。
  一些安卓手机自带的 Web View 中,当元素是绝对定位时,其垂直方向的 margin 是根据容器高度来计算的。也许是我做 Mobile Web 开发比较少的缘故吧,现在才知道还有这么个坑。下面是 BUG 重现 <!DOCTYPE html>
<style>
body { margin: 0; }
.panel {
  position: absolute;
  border-bottom: 1px solid red;
  width: 100%;
  margin-top: 100%;
}
</style>
<div class="panel"></div>
  当然并不是所有 Android 都有坑,只是部分版本吧(反正我的 HTC 就能稳定重现)。于是以后布局时依赖这个特性就得小心点了。要么用 top,要么用 padding。反正总是可以做出相同的效果。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^