zoukankan      html  css  js  c++  java
  • 捉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;/*重点在这,文字大小*/
       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代码格式 Google-java-format VS AlibabaP3C
    推荐Java代码规范的几个插件
    muduo 库解析之六:Exception
    muduo 库解析之五:CurrentThread
    muduo 库解析之二:TimeStamp
    muduo 库解析之一:Copyable 和 NonCopyable
    YUV
    Windows 下 ffmpeg 的安装和测试
    QImage 与 Mat 转换时图像倾斜
    qBreakpad
  • 原文地址:https://www.cnblogs.com/hu-w/p/5348666.html
Copyright © 2011-2022 走看看