html flex兼容性,Flexbox在IE9下的兼容性问题解决方案

CSS

语言：

CSSSCSS

确定

body {

background: #111;

color: whitesmoke;

}

.timeline {

list-style-type: none;

display: -moz-box;

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-moz-box-align: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-moz-box-pack: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

/*for ie9*/

justify-content: center;

margin: 58px auto 0;

display: table;

}

.timeline li {

display: table-cell;

}

.timestamp {

margin-bottom: 20px;

padding: 0px 40px;

display: flex;

flex-direction: column;

align-items: center;

font-weight: 100;

}

.status {

padding: 0px 35px;

display: flex;

justify-content: center;

border-top: 2px solid #e9cd11;

position: relative;

transition: all 200ms ease-in;

}

.status:before {

content: "";

width: 14px;

height: 14px;

background-color: #e9cd11;

border-radius: 14px;

border: 3px solid #291b01;

position: absolute;

top: -10px;

left: 42%;

transition: all 200ms ease-in;

}

h3 {

text-align: center;

color: orange;

}