1 div出现莫名其妙的空白bug
之前写了一个后台管理系统,项目不小加上是改版,很多的js都是用的之前的, bug多到自己都不想看, 其中有个是用iframe 框架加载表格页面,但是右边跟下边出现莫名其妙的空白,也审查不到元素
项目很急,在不影响使用的情况下就先上线了,后面测试提出bug, 实在找不到原因就把页面改成单屏,overflow:hidden ;治标不治本
与a前端讨论,认为可能是有元素定位到别的地方去,但是还是在这里占位
经过仔细检查,发现还真是有个元素margin上下20px,但是内部元素又被position:relative移动了,没有在这里, 他用的是一个分页插件,心好累啊
下边解决,就差右边了,想说可能也是这个问题,然而,,,,真的不是
就是审查不到元素,但是就是出现10px左右的空白, 之前证明overflow:hidden 是有效的,经过添加一个个子元素该属性,把问题定位在table元素,最后居然是因为thead上加了box-shadow,
怪不得就是找不到,主要还是对css3了解不够的锅啊!!!!
总结: a~大片的空白肯定是有元素占位,不要急,仔细找, 不要有太多嵌套, 坑的都是自己
b~小片的空白可能是box-shadow的锅~~
2 昏昏沉沉的bug
在给后台管理系统追加新页面的时候,是直接复制别的页面过来,引用之前的js跟css,但是input type="button" 跟input type="submit"的都出现了很神奇的情况,在页面上文字居然可以编辑,绑定事件也无法触发,纠结了一个下午,就是没有看出问题....
第二天对比别的正常的按钮的css,发现input[type='button'] 跟input[type='submit']的样式全部没有加载,显然是浏览器没有把这几个input认为是按钮,那肯定是type类型有问题
结果是写type的类型的时候在右边双引号前多了一个空格,去掉后果然没问题了,瀑布泪啊!!!!
在引用id写js的时候也没办法找到该元素,一看!尼玛都是多了个空格.....
果然是没有好好休息的结果....
总结: input type="button" 跟input type="submit"在页面上文字可以编辑,绑定事件无法触发,原因可能就是多了一个空格
3 苹果手机左上角按钮返回不刷新
在实际项目中,点击底部导航,跳转到不同的页面,而且相对应的按钮加active 类名,改变其背景图
pc, 安卓返回都木有问题,但是苹果手机左上角点击返回按钮时出现active不会切换和从上一页返回后需要改变的底部背景图丢失问题
感觉是苹果手机复用了之前的页面,而没有刷新页面,也不再重新加载js
解决方案: a 在点击的a 的链接最后加#wechat_redirect 这样图片资源会重新加载, 但是active还是么有切换
b 在页面上加下面代码,将返回后必须加载的js放进去
window.onpageshow=function(e){
if(e.persisted) {
console.log('aa')
}
};
最后一条感觉比较重复,有更好的方法请指教,共同进步, 谢谢!!
4 css其中一项页面无法引用
一个项目的底部写了浮动,但是在页面上怎么搞footer就是引用不到这个css,没写错类名,它的子类的样式都没毛病
无法引用的样式写的也没毛病,变换位置就可以,但是之前那个位置的新样式就会失效,确定不是样式的问题,那就是那个位置前后有不该出现的东西
这个位置上面有个注释,注释看起来没毛病,复制出来放在hbuilder编辑器中,发现注释的边上多了一个边框包着的问号
在别的编辑器中都是没有发现的,神了,也不知道是怎么写出来的,坑人的好办法啊!
总结: css样式单个引用失败,除了本身写错,可能是在看起来空白的地方有特殊符号
5 微信公众号商城首页ipone无法下滑
页面是采用div+float+flex写的, 测试,开发环境都没毛病,正式上线安卓没毛病,但是ipone出现页面无法下滑, 测试/开发环境与之代码一毛一样, 怀疑是环境的问题,后台查代码,数据库
都没毛病,死结
仔细研究代码,发现之前的前端留下一个大坑,所有的浮动都没有清浮动!人生啊!!!!
改之,部分型号的好了,但是大部分还是不行
再改flex布局,好了
估计ipone对flex兼容还是有问题,人生处处都是坑...
然后写代码还是别太有风格了, 坑的是别人但是也会是自己
6.ie9 input type='file'的左边出现闪烁的光标
把一个项目从就兼容谷歌改成兼容谷歌跟ie9+, 出现一个很奇怪的事情,file上传控件左边都有一个闪烁光标,确定那个位置就只有file控件,之前是美化了file按钮,opacity:0, 把改为1时发现这是ie本身用来放文件名称的地方;找找找,
发现input还有一个属性 unselectable="on" , 这样光标就消失了, 这个属性还可以用在input加了readonly但是还是有光标的问题 ;
但是这个还是有点bug, 在ios浏览器 还是会有聚焦的问题
$('input[readonly]').on('focus', function() {
$(this).trigger('blur');
});
总结: input闪烁的光标可以用 unselectable="on" 解决问题