解决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代码不能太长时间不写,这东西得多写才有经验。还有,移动开发就是一个坑,当然得有勇气跳下去。小生渣文一篇记录一场渣事故,不喜勿喷~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

Django+xadmin打造在线教育平台(十)

代码 github下载 十四、xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个...

1.1K11
来自专栏java思维导图

简洁概括,程序员的技能树

前端程序员 基础 HTML / CSS JavaScript DOM 中级篇 数据格式(如JSON、XML) RESTful API交互(如jQuery Aja...

3706
来自专栏微信小程序开发

小程序授权逻辑如何更改为button形式

6049
来自专栏iOSDevLog

Unity 3D 开发《王者荣耀》:英雄攻击创建按钮源码:https://github.com/iOSDevLog/ArenaOfValor

4726
来自专栏一“技”之长

iOS开发之BusinessChat框架使用 原

      BusinessChat是iOS11.3后引入的新框架,这个框架配合iMessage应用将商家与用户更加紧密的结合起来,并且为商家提供了另外一种非常...

2052
来自专栏Youngxj

媒体范自适应搜索栏优化

2084
来自专栏SEO

SEO新手必知50个SEO术语词解释

45412
来自专栏DeveWork

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其CSS 的插件,经过半年持续迭代,现已稳定用在旗下两款产品的Web ...

2929
来自专栏编程微刊

微信小程序常见的UI框架/组件库总结

9954
来自专栏带你撸出一手好代码

把需求变化带来的代码修改成本降至最低的一种方法

为解决工作中一些繁琐的问题, 写了一个GUI程序, 操作界面是这个样子的 ? 这个程序的实现起来并不是非常的繁琐, 但在界面的交互操作上, 也不仅仅只是展示数据...

3447

扫码关注云+社区

领取腾讯云代金券