[目录未定]模拟器 css 中的一个超级大坑 -- top height 属性不用时一定要设置为 auto
clq
浏览(387) -
2020-11-17 18:31:24 发表
编辑
关键字: android_dev_self_book
[目录未定]模拟器 css 中的一个超级大坑
即使是现在 webit/chrome/cef 系一统天下的情况下，css 的设计仍然难以统一。所以我一般用的是 2623 这是 xp 上的最后一个支持版本来做最后的兼容测试和调试。
这能避免绝对大部分问题。但也有例外，比如 ios 下的嵌入 iframe 不能滚动的问题（解决办法请搜索本站）。
今天发现的这个也是大坑：
安卓模拟器的 webview 在 position 为 abs... 绝对定位时，要去掉 top 属性让 div 底对齐的话发现用 unset default 或者清空这个 css 都不行。必须要用 "auto"
在测试其他功能时也发现过 height 也是在这种情况下必须为 auto ，但关键是，这个只在模拟器中出现，所以非常的难调试。
所以让我们不需要某个尺寸属性时就给它 auto ，什么清空这样的或者 unset 这样的 css3 功能都不要做。最保险的是查询一下这个属性的缺省值是什么，只清空的话未必能恢复到缺省值的状态。
具体可参考我们的 nojsui 的源码注释。
//类似 setPosition_fixed_bottom，底部对齐
this.AlignBottom = function(space_width, base_parent){
if (0 == strlen(space_width)) space_width = "0px";
$("#" + this.name).css({"position": "absolute"});
$("#" + this.name).css({"right": "0px"});
$("#" + this.name).css({"left": "0px"});
$("#" + this.name).css({"bottom": space_width});
////$("#" + this.name).css({"top": "unset"}); //还要清除 top 属性才行//unset 是 css3 属性，原来的应该是 default
$("#" + this.name).css({"top": "auto"}); //还要清除 top 属性才行//unset 是 css3 属性，原来的应该是 default
//2020.11.17 对于 android 的模拟器来说，这里是一个大坑//对于 pc 浏览器都可以用 unset，但 asd2019 的模拟器就是不行，即使是
//api level 19 且 os 已经是 5.1.1 而真机 5.0 就可以了。这时候必须是值是 auto 或者用 ({"top": ""}) 清空
//但这又和 height 的又冲突了，因为 height 用 ({"height": ""}) 也是不行的。不过相同的是，两者都可以用 "auto"
//这算是个好消息
//一般还要设置父节点
if (base_parent == true){
//$("#" + this.parent.name).css({"position": "absolute"});
$("#" + this.parent.name).css({"position": "relative"}); //父节点为 absolute 的时候效果还不一样，那样的话就是基于自己的正常位置偏移了，比较古怪
}
}//
----------------------------------------------------------------
另参考我们 nojsui 项目中的注释
//https://www.cnblogs.com/kismet82/p/5479390.html
//js 中显示 jquery 提示的方法
//css 中有个很让人两难的事情,即子节点会继承父节点的属性,而且还不能取消. 这在设置 line-height 等属性时会让设计出来的大小与设想中的不同
//这时候就要许原为 css 的默认缺省值,而这种值对于不同的属性又是不同的!!!
//所以只好定义一个缺省值的列表
//参考
// this.autoheight = function() {
// //有很多种方法,不一定用这种
// $("#" + this.name).css({"overflow": "hidden"});
// //$("#" + this.name).css({"height": ""}); //必须清空//好像没用,要用 default 才行
// //$("#" + this.name).css({"line-height": ""}); //必须清空/好像没用,要用 default 才行
// //$("#" + this.name).css({"height": "default"}); //必须清空//好像没用,要用 default 才行//height 的缺省值应该是 auto
// //$("#" + this.name).css({"line-height": "default"}); //必须清空/好像没用,要用 default 才行//line-height 的缺省值应该是 normal
// }//
var default_height = "auto";
var default_top = "auto"; //2020.11.17 对于 android 的模拟器来说，这里是一个大坑//参考 panel.js 中的 AlignBottom()
var default_line_height = "normal";
var default_position = "static"; //static 默认值. 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
----------------------------------------------------------------
这个问题最坑的地方在于，真机上的浏览器是没问题的。即使真机的 os 版本比模拟器低！！！
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
