项目中碰到一个十分有趣的情形:

布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏。如下图。

这里布局不用说肯定使用display:flex的。左侧flex:1;右侧width:80px;。

本来在我的机器上是各种ok的,可是交给后端的兄弟们后发现在他的机器上左侧并没有flex:1;

总是以一个固定的宽度杵在那里,破坏掉布局,后来一查看,原来是后端的chrome是最新版本,

而我的这台机器是旧版本,两个版本的chrome对display:flex的解析竟然不一样。

解决办法就是给左侧的flex自适应元素加了个最小宽度,给两个子级加了个width:100%,这个bug虽然

不常见不难,但是很有趣,因为在我的世界观里总以为版本越新适应性越好,出了这个bug确实挺有趣。

(有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug的更多相关文章

  1. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

  2. [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器

    截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...

  3. 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效。

    # 69.0 之后的版本 ## 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions , ...

  4. 使用Selenium时,如何选择ChromeDriver驱动版本对应Chrome浏览器版本

      ChromeDriver版本 支持的Chrome版本 v2.46 v72-74 v2.45 v71-73 v2.44 v70-72 v2.43 v69-71 v2.42 v68-70 v2.41 ...

  5. selenium driver版本和Chrome浏览器版本对应关系

    ChromeDriver v2.41 (2018-07-27) ---- Chrome v67-69ChromeDriver v2.40 (2018-06-07) ---- Chrome v66-68 ...

  6. chrome浏览器版本与驱动不匹配问题的解决办法

    1.浏览器与驱动如何匹配才不会报错 使用selenium模块的webdriver打开谷歌浏览器时常遇到这样的错误提示: selenium.common.exceptions.WebDriverExce ...

  7. CSS3 display:flex和display:box有什么区别?

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  8. IE浏览器版本判断 HTML代码

    <!--[if IE 6.0]> <div id="noie6" style="z-index: 20002;border: 1px solid #F7 ...

  9. 多栏多列布局(display:flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

随机推荐

  1. Nginx与Apache比较

    Nginx特点:高性能epoll 异步非阻塞多个连接(万级别)可以对应一个进程 支持反向代理支持7层负载均衡静态文件.反向代理.前端缓存等处理方便支持高并发连接,每秒最多的并发连接请求理论可以达到 5 ...

  2. ClickOnce部署(1):一些发布方式

    ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋友可以直接查找MSDN ...

  3. A Simple OpenGL Shader Example II

    A Simple OpenGL Shader Example II eryar@163.com Abstract. The OpenGL Shading Language syntax comes f ...

  4. Windows下使用Dev-C++开发基于pthread.h的多线程程序

    一.下载Windows版本的pthread 目前最新版本是:pthreads-w32-2-9-1-release.zip. 二.解压pthread到指定目录      我选择的目录是:E:\DEV-C ...

  5. Util应用程序框架公共操作类(九):Lambda表达式扩展

    上一篇对Lambda表达式公共操作类进行了一些增强,本篇使用扩展方法对Lambda表达式进行扩展. 修改Util项目的Extensions.Expression.cs文件,代码如下. using Sy ...

  6. 编写atoi库函数

    看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...

  7. T-Sql(三)存储过程(Procedure)

    今天讲下T-sql语法中存储过程的用法,我们一开始学习数据库语言的时候就是用一些简单的insert,select等语法,但是随着我们学习数据库的深入,就会发现一些简单的语法满足不了我们的要求,比如处理 ...

  8. IO通道

    本文原创,转载需标明原处. 通道,主要负责传输数据,相当于流,但流只能是输入或输出类型中的其一,而通道则可以兼并二者. 通道的基类是:Channel boolean isOpen() void clo ...

  9. Freemark笔记

    Freemark基本语法知识 Freemark 常用代码总结1 Freemark 常用代码总结2 笔记,吐槽一下freemark的蛋疼语法. 1.elseif 中间不能有空格 2.三目运算符 语法和j ...

  10. 在IIS EXPRESS下运行一个visual studio 项目,跳转到另一个项目的解决方案。

    原因是因为以前有一个项目也是3690端口,然后在3690端口上建立了一个网站,现在的新网站也是用的3690端口,那么会调用以前网站的WEB.CONFIG文件. 解决方法,右键单击网站,然后选择属性.在 ...