捉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后年轻（话说已经不年轻了），欢迎各行业大神
前来交流辩驳！！
最新文章
- java web使用gradle配置详情
- 细说ASP.NET Core与OWIN的关系
- asp.net下调用Matlab生成动态链接库
- NumberFormat类
- 二十八、带给我们一种新的编码思路——EFW框架CS系统开发中的MVC模式探讨
- openssl_final学习总结
- 第一天开通博客，就粗略写一下刚了解TCP/IP协议工作过程
- Linux下MySQL主从同步配置
- present的时候是可以直接回到第一个viewcon的
- 关于使用json 字符串转换为字典问题
- 模仿ICE的structured panorama小按钮
- Ibatis组合键关联查询
- 关于数据库中datareader的用法
- 自动化测试工具selenium的使用
- ArcPy 将mxd格式转换为msd格式
- Android Interpolator解析
- JS 简单工厂模式，工厂模式（二）
- ANTLR v4 专业术语集
- WEB API Filter的使用以及执行顺序
- ngnix——FastCGI 相关参数调优