项目中碰到一个十分有趣的情形:
布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏。如下图。
这里布局不用说肯定使用display:flex的。左侧flex:1;右侧width:80px;。
本来在我的机器上是各种ok的,可是交给后端的兄弟们后发现在他的机器上左侧并没有flex:1;
总是以一个固定的宽度杵在那里,破坏掉布局,后来一查看,原来是后端的chrome是最新版本,
而我的这台机器是旧版本,两个版本的chrome对display:flex的解析竟然不一样。
解决办法就是给左侧的flex自适应元素加了个最小宽度,给两个子级加了个width:100%,这个bug虽然
不常见不难,但是很有趣,因为在我的世界观里总以为版本越新适应性越好,出了这个bug确实挺有趣。
(有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug的更多相关文章
-
display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
-
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...
-
从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效。
# 69.0 之后的版本 ## 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions , ...
-
使用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 ...
-
selenium driver版本和Chrome浏览器版本对应关系
ChromeDriver v2.41 (2018-07-27) ---- Chrome v67-69ChromeDriver v2.40 (2018-06-07) ---- Chrome v66-68 ...
-
chrome浏览器版本与驱动不匹配问题的解决办法
1.浏览器与驱动如何匹配才不会报错 使用selenium模块的webdriver打开谷歌浏览器时常遇到这样的错误提示: selenium.common.exceptions.WebDriverExce ...
-
CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
-
IE浏览器版本判断 HTML代码
<!--[if IE 6.0]> <div id="noie6" style="z-index: 20002;border: 1px solid #F7 ...
-
多栏多列布局(display:flex)
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
随机推荐
-
深入N皇后问题的两个最高效算法的详解 分类: C/C++ 2014-11-08 17:22 117人阅读 评论(0) 收藏
N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 一. 求解N皇后问题是算法中回溯法应用的一个经典案例 回溯算 ...
-
本地数据jqGrid分页
var mydata=''; $(function() { var str = ''; str += "<span>共<span id='p_total'></ ...
-
poj 2299 Ultra-QuickSort 逆序对模版题
用树状数组求逆序数 唯一的坑点就是sum要用long long存 直接贴代码了 以后忘了还能直接看 2333…… PS:和hdu3743代码是一样的,因为两个都是逆序对模版题…… #include&l ...
-
SDWebImage 加载显示 WebP 与性能问题
SDWebImage 加载显示 WebP 与性能问题 本文包含自定义下载操作 SDWebImageDownloaderOperation 与编码器 SDWebImageCoder.SDWebImage ...
-
spring+myBatis 配置多数据源,切换数据源
注:本文来源于 tianzhiwuqis <spring+myBatis 配置多数据源,切换数据源> 一个项目里一般情况下只会使用到一个数据库,但有的需求是要显示其他数据库的内容,像这样 ...
-
【转】10条你不可不知的css规则
10条你不可不知的css规则 Posted on 2006-12-20 10:33 雨中太阳 阅读(343) 评论(1) 编辑 收藏 :[译]10条你不可不知的css规则正文: Published D ...
-
31 位域、空类的sizeof值
1 分析下列程序: #include<iostream> using namespace std; struct s { int x: 3; int y: 4; int z: 5; dou ...
-
真机调试报错error ==Error Domain=NSURLErrorDomain Code=-1009 ";似乎已断开与互联网的连接。";
真机调试报错error ==Error Domain=NSURLErrorDomain Code=-1009 "似乎已断开与互联网的连接." 请注意,错误代码是-1009,网上关于 ...
-
js操作checkbox(复选框)的方法总结
收集了一些用js代码操作checkbox复选框的代码,分享出来,供需要的朋友参考: <script> //复选框checkbox 处理方法 //搜集整理 www.jbxue.com fun ...
-
汇编_指令_SUB
SUB是减法运算. 比如mov ax,2mov bx,1sub ax,bx 其中sub ax,bx就是ax中的值减bx中的值,等于1,然后把结果,也就是1,放入ax中.