(有意思)chrome分化浏览器版本对display:flex和溢出隐藏突显省略符号的bug

(有意思)chrome分化浏览器版本对display:flex和溢出隐藏突显省略符号的bug

花色中相见1个相当有意思的情状:

布局要求是这么:右侧成立新订单是一定宽度80px,左侧是自适应宽度,溢出隐藏。如下图。

图片 1

此间布局不用说鲜明使用display:flex的。左侧flex:一;右边width:80px;。

本来在本身的机械上是各类ok的,可是交给后端的男生们后意识在她的机器上左边并未flex:1;

连日来以1个一定的增进率杵在这里,破坏掉布局,后来壹查看,原来是后端的chrome是新型版本,

而小编的这台机械是旧版本,七个版本的chrome对display:flex的剖析竟然不均等。

化解办法便是给左边的flex自适应元素加了个小小宽度,给七个子级加了个width:百分之百,那些bug就算

不常见轻松,不过很有意思,因为在自笔者的人生观里总觉得版本越新适应性越好,出了这一个bug确实挺有意思。

 

 

1.margin + 定宽

   

水平居中布局

   

不用设置父成分样式 (支持 IE 八 及其以上版本)相称 IE 八1眨眼本子须要调治为

   display: table-cell;

right

 

大幅度固定

   

包容性好

   position: absolute;

right

  相必是个前端都见过,那定宽的品位居中,我们还是能用上面那种来完成不定宽的

.left{float: left;width:100px;  }.right-fix{float:
right;width:100%;margin-left: -100px; 
}.right{margin-left:100px/*间隔可再进入 margin-left */}

 .right {

  1. flex

2

 等高布局

1

 .column+.column { /* 相邻兄弟选取器 */

只需安装父节点属性,没有须要设置子成分

3

right

   

1.float + margin

   

3 .table

 }

  1. absolute + margin-left

   display: flex;

等高布局

Demo

transform为 CSS三 属性,有包容性难点

   left: 50%;

left

 .parent-fix {

  1. inline-block + text-align + table-cell + vertical-align

 

  1. table

   position: absolute;

4

 

display: table在呈现上好像block成分,不过增长幅度为内容宽。

 .parent {

2.float + overflow

Demo

table的风味为每列等宽,每行等高能够用来减轻此须要

相对来讲于采取transform ,有包容性越来越好

left

flex有包容性难题

left

   padding-left: 20px;

此办法不会设有 IE 6 中三像素的 BUG,但.left不可选择, 需求设置.left
{position: relative}来提升层级。 注意此格局扩张了不供给的 HTML
文本结构。

   width: 100px;

先是我们来看看水平居中

   display: flex;

Demo.parent{position: relative;  }.child{position:
absolute;left:50%;width:100px;margin-left: -50px;/* width/2 */}


3

 .parent {

借使说absolute壮大,那flex只是笑笑,因为,他才是最强的。。。但它有包容难点

 }

.parent{margin-left: -20px;  }.column{float:
left;width:25%;padding-left:20px;box-sizing: border-box;  }

 水平垂直居中

此措施为伪等高(唯有背景显示中度相等),左右真正的可观其实不对等。包容性较好

Demo

Demo.parent{display: table-cell;vertical-align: middle;  }

   display: table;

相对定位脱离文档流,不会对三番五次成分的布局导致影响。

 .right {

left

  table 的风味为每列等宽,每行等高能够用于缓和此须求

Demo.child{display: table;margin:0auto;  }

   justify-content: center; /* 水平居中 */

此方法能够圆满包容 IE8 以上版本

right

left

 .child {

Demo.parent{position: relative;  }.child{position:
absolute;top:50%;transform:translateY(-50%);  }

 .child {

.parent{display: table;width:100%;table-layout: fixed;  }.left{display:
table-cell;width:100px;  }.right{display:
table-cell;/*宽窄为结余宽度*/}

   width: 100%;

left

 

2

right

3.flex + align-items

   

等遍布局

 }

安装overflow: hidden会触发 BFC 情势(Block Formatting
Context)块级格式上下文。BFC是怎么着啊。用浅显的来说正是,随意你在BFC
里面干啥,外面都不会遭到震慑 。此办法样式轻巧但不协理 IE 6

 

水平垂直居中

 .parent {

  1. float

Demo

Demo.parent{position: relative;  }.child{position:
absolute;left:50%;top:50%;transform:translate(-50%, -50%);  }

   float: right;

  1. float

 }

比较于选拔transform,有包容性越来越好

 .child {

强大轻便,有兼容难题

 .right {

table的体现个性为每列的单元格宽度和必然等与表格宽度。table-layout:
fixed可加速渲染,也是设定布局优先。table-cell中不可能安装margin但是可以透过padding来设置间距

 }

right

   

  1. absolute + transform

   

相必是个前端都见过,那定宽的程度居中,大家还足以用下边那种来贯彻不定宽的

 .right {

transform为 CSS三 属性,有兼容性难点

   

  1. flex + justify-content + align-items

4

3

 }

.parent{display: flex;  }.column{flex:1;  }.column+.column{/*
相邻兄弟选拔器 */margin-left:20px;  }

  庞大的absolute对于那种小题目自然也是很简短的

1.table-cell + vertical-align

   float: left;

right

 .parent {

我们在学会1列定宽,一列自适应的布局后也得以1本万利的落实多列定宽,一列自适应多列不定宽加壹列自适应这里大家不1一疏解,大家自行尝试,也能够加强后面学习的

   left: 50%;

right

 }

无敌的absolute对于那种未有失水准理所必然也是很简短的

 }

相对定位脱离文书档案流,不会对继续成分的布局导致影响。

  6. flex + justify-content

Demo.parent{display: flex;align-items: center;  }

right

1.table

 }

Demo.parent{position: relative;  }.child{position:
absolute;left:50%;transform:translateX(-50%);  }

   transform: translateY(-50%);

.parent{display: flex;  }.left{width:100px;margin-left:20px; 
}.right{flex:1;  }

     

2.absolute + transform

  首先我们来看看水平居中

left

   

Demo.child{display: inline-block;  }.parent{text-align: center;  }

 }

低版本浏览器包容难题

 

包容性佳(乃至足以合营 IE 陆 和 IE 7)

只需安装父节点属性,不须求设置子成分

.parent-fix{margin-left: -20px;  }.parent{display:
table;width:100%;/*能够布局优先,也得以单元格宽度平分在没有设置的情景下*/table-layout:
fixed;  }.column{display: table-cell;padding-left:20px;  }

 水平居中布局

left

   display: table;

.parent{display: flex;  }.left{width:100px;margin-left:20px; 
}.right{flex:1;  }

 

在意这里其实利用了align-items: stretch,flex
暗中同意的align-items的值为stretch

   display: table-cell

  1. flex

 .child {

1

 }

  1. flex + justify-content

3

4

  大家在学会一列定宽,一列自适应的布局后也能够方便的兑现
多列定宽,1列自适应 多列不定宽加壹列自适应
这里我们不一1讲解,我们自行尝试,也能够巩固前边学习的

right

 

  1. absolute + transform

   

到此,大家询问科学普及的布局化解方案,那么些只是参考,一样的布局实现情势多样各种。首要就动用position、flex、table(从很久以前到现在起,大家就丢掉了table布局页面,但display:
table;是分外强硬)
、float等属性此时此刻flex包容性较差**傲娇的工程师应该抛弃太低版本的浏览器**

包容性好(IE 八以下版本须要调动页面结构至 table)

right

 }

蛋疼的包容性难题

 }

.left{float: left;width:100px;  }.right{overflow: hidden;  }

     

2.flex

 }

  1. table + margin

 .right {

.left{float: left;width:100px;  }.right{margin-left:100px/*间隔可再到场margin-left */}

 .column {

2

   display: inline-block;

天性难题,只适合小范围布局

 .right {

3

  假使说absolute庞大,那flex只是笑笑,因为,他才是最强的。。。但它有包容难点

right

 

right

1

right

 }

right

 }

right

   

Demo.parent{display: flex;justify-content: center;  }

   position: relative;

3.inline-block + text-align

  傲娇的技术员应该放弃太低版本的浏览器

纯属定位脱离文书档案流,不会对三番8回成分的布局导致影响。但假如绝对定位成分是举世无双的因素则父成分也会失掉低度。

 }

只需安装父节点属性,无需设置子元素

 }

同程度居中,那也能够用margin-top达成,原理水平居中

left

flex有包容性难题

 

right

left

right

   padding-bottom: 9999px;

垂直居中

此方式能够全面包容 IE八 以上版本

.parent{overflow: hidden; 
}.left,.right{padding-bottom:9999px;margin-bottom: -9999px; 
}.left{float: left;width:100px;margin-right:20px;  }.right{overflow:
hidden;  }

Demo

##一列定宽,一列自适应

   overflow: hidden;

right

   width: 25%;

Demo.child{width:100px;margin:0auto;  }

 }

.parent{display: table;width:100%;table-layout: fixed;  }.left{display:
table-cell;width:100px;  }.right{display:
table-cell/*大幅为剩下宽度*/}

 .parent {

transform为 CSS3 属性,有兼容性难点

   vertical-align: middle;

IE 陆 中会有叁像素的
BUG,消除办法能够在.left参加margin-left:-三px
当然也有化解这么些小bug的方案如下:

 }

4

   float: left;

Demo.parent{display: flex;justify-content: center;/* 水平居中
*/align-items: center;/*笔直居中*/}

不要设置父成分样式 (支持 IE 八 及其以上版本)包容 IE 8转眼本子须要调动为

Demo.parent{text-align: center;display: table-cell;vertical-align:
middle;  }.child{display: inline-block;  }

 }

包容性好(IE 八以下版本必要调动页面结构至table)

 }

1

   display: flex;

 .parent {

right

   display: table-cell;

  2. inline-block + text-align + table-cell + vertical-align

读书原来的文章

   width: 100%;

right

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图