捉Bug:易车注册页布局小臭虫 附demo

时间:2023-03-08 22:38:01
捉Bug:易车注册页布局小臭虫 附demo

--------<!--文章开始-->--------

开场show:这几天天气异常燥热,早上起来从棉毛衣换到了小短袖,配上一杯冷泡乌龙茶,真是没谁了,这哥们懂得享受哈

开始鼓捣博客,把博客栏目从零个增加到5个,黄金组合,这是什么节奏,这是要正式迈向前端界,正式迈向前端界!!

没女朋友的男孩就只能鼓捣这玩意儿,呜呼呼呜呼呼...(长得丑只能多读书哈)

把博客当成日记来写了吗,哥哥,咱废话不多讲。先讲讲我的五个栏目

------<!--表格(五栏目)-->----

虎说(第一季) 捉Bug
大型前端综艺娱乐节目 大型互动式真人秀节目

得劲!!!

虎扯 虎记 虎道
前端小tips 知识点追究 凡是届有道

娱乐大片即视感!

咋都是“虎”,咱博客名小老夫,请允许我自称‘小老虎’(笔名,鲁迅是不是不叫“鲁迅”)

-------------<!---华丽的注释线-->------------------

本集捉Bug第一季(第一季集)由:

小老虎早上吃的包子赞助

素材由网易汽车站(中国)提供,由衷感谢!

捉Bug:易车注册页布局小臭虫 附demo

-------<!--Bug正文-->------

Bug表现:易车网注册页面表单前缀,在UC浏览器PC版中,由于页面缩放的原因,导致不正常换行(不是大问题,不过始终是问题)

于是就有了下面的现象

捉Bug:易车注册页布局小臭虫 附demo

经过严谨的测试:有以下结果

UC FF chrome opera 360 IE6+
缩放导致异常 完美 完美 完美 完美 完美

原因:1.容器固定宽度不够,缩放过程间距的增大,导致换行

2.此现象只在UC中出现,说明什么,UC缩放机制不同

代码走起

i{float:right;
font-style:normal;
font-size:16px;/*重点在这,文字大小*/
width:64px;/*重点在这,容器宽*/
text-align:right;
display:block;}

发现没有,文中的字符数为“4”

4*16px=64px,正常不会导致换行(谁知道UC什么毛病)

-------<!--办法-->-------

得到问题的根源:就有办法

,咱将网页中的width改成70px,于是再也没有出现这种状况

,或者优雅的方式,增加属性white-space:nowrap,强制不换行

就有了以下的呈现

捉Bug:易车注册页布局小臭虫 附demo

问题完美解决

------<!--再纠UC-->------

再探:UC那玩意儿,嘛回事,然后就是一个悲伤的故事,咱做了一个demo测试,(碰巧使用UC PC版的就点击)易车网小Bug页面

确信了UC的渲染方式有不同,同样的demo变现为1px,在UC中放大后的变线始终是1px没有变化,在其他的浏览器中明显有增粗的现象

解决他:

做页面中,一排的文字,最好横向空间留大点,

或者在属性中设置强制不换行,white-space:nowrap

能够很好避免这些小问题

咱不能怪UC,也不怪易车...(那tm怪谁,哈哈哒)

----<!--end-->----

时间不早,春困秋乏,气温刚好,脑袋晕晕沉沉,赶紧和周公见面去

文章就明天起来再发,不行了,睡觉睡觉~~

新技能Get,起了个大早,急忙整理这篇小短文,赶紧发布

----<!--末尾的申明-->------

申明:文中出现的主题和那啥,只是作者的个人见解,不代表博客园以及其他大神的见解

如果有疏漏那也是正常的,咱90后年轻(话说已经不年轻了),欢迎各行业大神

前来交流辩驳!!