HTML5技术

(有趣)chrome不同浏览器版本对display:flex和溢出隐藏显示省略符号的bug - 明lucky

字号+ 作者:H5之家 来源:H5之家 2016-12-23 12:00 我要评论( )

项目中碰到一个十分有趣的情形: 布局要求是这样:右边创建新订单是固定宽度80px,左侧是自适应宽度,溢出隐藏。如下图。 这里布局不用说肯定使用display:flex的。左侧flex:1;右侧width:80px;。 本来在我的机器上是各种ok的,可是交给后端的兄弟们后发现在

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

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

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

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

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

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

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

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

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • C#将WebBowser控件替换为Chrome内核 - SpringLife

    C#将WebBowser控件替换为Chrome内核 - SpringLife

    2016-12-22 18:17

  • 随便记的一些有趣的干货的地址 - 伍三思

    随便记的一些有趣的干货的地址 - 伍三思

    2016-10-25 12:00

  • 移动前端页面与Chrome的远程真机调试 - imwtr

    移动前端页面与Chrome的远程真机调试 - imwtr

    2016-09-24 10:00

  • 超酷不同风格页面布局幻灯片特效 - 爱上程序猿

    超酷不同风格页面布局幻灯片特效 - 爱上程序猿

    2016-08-14 12:00

网友点评
a