解决Safari中Float导致页面偏移的BUG

代码

在用 safari for MAC 调试主题的时候遇到了一个问题,现在写在这里记录下——Safari 中浮动(float)导致页面右侧偏移的 BUG。

重现

直接上图。

chrome for MAC 中的网站如下图:
解决Safari中Float导致页面偏移的BUG

而 safari 却是这样的:

解决Safari中Float导致页面偏移的BUG
看到没有?相同 1920 分辨率下的 safari 浏览器在同一网页底部会有横向右拉条,向右拉为空白。

当初发现这个问题时候不能一下定位在某个 div 上,只能一个个排查,而这个问题在首页、文章内页等所有位置都会出现,就在 header 部分排查,最后很容易就锁定到了出问题的模块——search 模块。

相关代码如下:

解决Safari中Float导致页面偏移的BUG

CSS 代码大概是这样(第 1、2 行):

.u-floatLeft{float:left}
.u-floatRight{float:right;}

在通过删减 HTML 代码进行排查,锁定了是 float 的定位问题。

解决

问题发现源头,就得解决,首先先试着采用 position 的定位方式,未果(当然,“果”不了可能因为前端渣),然后想到了,当时在 div 中设置了 width 或 height,那么将超出部分隐藏不就可以了?果然在

.u-floatRight{float:right;}

后加上

overflow:hidden;

最终代码如下:

.u-floatRight{float:right;overflow:hidden;}

全文完。

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

OSX

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:11次,页面生成时间:0.031秒。