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

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

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

 

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

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

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

 

------<!--表格（五栏目）-->----

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

 

得劲！！！

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

 

娱乐大片即视感！

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

 

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

 

本集捉Bug第一季（第一季集）由：

           小老虎早上吃的包子赞助

           素材由网易汽车站（中国）提供，由衷感谢！

 

 

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

 

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

                于是就有了下面的现象

 

 

 

 

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

 

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，强制不换行

 

 

就有了以下的呈现

问题完美解决

 

 

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

 

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

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

 

解决他：

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

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

能够很好避免这些小问题

 

咱不能怪UC，也不怪易车...（那^tm怪谁，哈哈哒）

 

 

 

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

 

 

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

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

 

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

 

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

 

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

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

前来交流辩驳！！