解决iOS 版Safari 中浮动(float)导致页面右侧偏移的bug
长时间没写CSS代码就是生疏了啊!昨天在用ipad 调试最新的主题的时候遇到了一个坑,现在写在这里记录下——iOS 版Safari 中浮动(float)导致页面右侧偏移的bug。
重现
看标题看客可能会不知所云,且直接上图,这个bug导致的结果是这样的:
当初发现这个问题时候不能一下定位在某个 div 上,只能一个个排查;幸好这个问题只在文章页发现,然后就在文章页排查一个个组件,因为有经验将代码分模块写,最后很容易就锁定到了出问题的模块——“上一篇、下一篇”的模块。
这个WordPress 主题中“上一篇、下一篇”的模块的HTML代码大概是这样的:
<div class="post-navigation clearfix"> <a class="prev" href=""><span class="icon-left">上一篇</span></a> <a class="next" href="">下一篇<span class="icon-right"></span></a> </div> |
---|
CSS代码大概是这样:
.post-navigation{display: block;clear: both;cursor: pointer;margin-bottom: 2em;padding: 0 1em} .post-navigation a{display: inline-block} .post-navigation a.prev{float: left} .post-navigation a.next{float:right} |
---|
在通过删减HTML 代码进行排查,锁定了是float 的定位问题。
解决
问题发现源头,就得解决,首先先试着采用position的定位方式,未果(当然,“果”不了可能因为前端渣);然后就偷懒借助万能的google,在stackoverflow 上找到了解决方案;加个 overflow:hidden
即可解决问题。
原提问地址:
http://stackoverflow.com/questions/15429344/how-to-work-around-this-safari-float-rendering-bug
一句话总结的话:写CSS代码不能太长时间不写,这东西得多写才有经验。还有,移动开发就是一个坑,当然得有勇气跳下去。小生渣文一篇记录一场渣事故,不喜勿喷~
- ASP.NET Web API对OData的支持
- 小技巧 - 简化你的泛型API
- 优化OEA中的聚合SQL
- Universal Image Loader for Android 使用实例
- 如何从 Ring Buffer 读取?
- OEA中的AutoUI重构(1) - Command自动生成
- 开源项目Universal Image Loader for Android
- android Universal Image Loader for Android 说明文档 (1)
- 修改android最小堆内存
- (转)ES6新特性概览
- 基于OEA框架的客户化设计(一) 总体设计
- 【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
- 关于Android N的那些事
- “节流函数”提高性能
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Android实现两个数相加功能
- 基于Android studio3.6的JNI教程之ncnn之语义分割ENet
- android计算器实现两位数的加减乘除
- android studio实现简单考试应用程序实例代码详解
- Kotlin 实现按钮点击跳转监听事件方式
- Android使用剪切板传递数据
- kotlin anko页面跳转实现方式,携带参数或flag
- 关于android连续点击出现多个Activity界面的解决方法
- Android Studio使用recyclerview实现展开和折叠功能(在之前的微信页面基础之上)
- 解决django 多个APP时 static文件的问题
- Android Studio如何获取SQLite数据并显示到ListView上
- Android自定义短信倒计时view流程分析
- 使用Android studio3.6的java api方式调用opencv
- thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
- php+iframe 实现上传文件功能示例