我在Safari中使用flexbox布局遇到了一些问题。我有一个使用flexbox对齐的条形图，但是我无法在safari中正确实现它。
请查看我的JSfiddle。欢迎所有建议！除Safari外，所有浏览器都显示正确。
小提琴： http://jsfiddle.net/husky999/dq0ha3d5/11/
HTML
var img = "img"CSS
<div id="barChart">
<ul class="bars">
<li class="axis">
<div class="level">Ninja</div>
<div class="level">Skilled</div>
<div class="level">Average</div>
<div class="level">Noob</div>
</li>
<li id="tomato" class="eachBar">
<div class="percentage">90<small>%</small>
<div class="skill">HTML5</div></div>
</li>
<li id="pink" class="eachBar">
<div class="percentage">70<small>%</small>
<div class="skill">SASS</div>
</div>
</li>
<li id="yellow" class="eachBar">
<div class="percentage">50<small>%</small>
<div class="skill">JS</div>
</div>
</li>
<li id="aqua" class="eachBar">
<div class="percentage">60<small>%</small>
<div class="skill">JQUERY</div>
</div>
</li>
<li id="apple" class="eachBar">
<div class="percentage">40<small>%</small>
<div class="skill">SYMFONY</div>
</div>
</li>
<li id="khaki" class="eachBar">
<div class="percentage">55<small>%</small>
<div class="skill">OOP</div>
</div>
</li>
</ul>
</div>
的Javascript
#barChart {
height: 450px;
position: relative;
width: 100%;
background: url(http://2cweb.vn/img/editor-upload/blog/Bo-suu-tap-mau-pattern-cho-thiet-ke-web-P1-2Cwebvn-03.jpg) repeat;
border-bottom: 1px solid #ccc;
}
.bars {
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
}
.level {
margin: 0 20px 100px 0;
}
.percentage {
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
bottom: 0;
font-family: arial;
font-size: 32pt;
color: #FFF;
opacity: 0.3;
text-align: center;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}
.skill {
text-align: center;
color: #fff;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
font-family: arial;
font-size: 12px;
}
small {
font-size: 14pt;
vertical-align: middle;
}
.eachBar {
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
}
.axis {
display: block;
float: left;
border-right: 1px solid #CCC;
}
#tomato {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: rgb(255,48,25); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(207,4,4,1);
}
#pink {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fb83fa+0,e93cec+100;Pink+3D+%232 */
background: rgb(251,131,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(251,131,250,1) 0%, rgba(233,60,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,131,250,1)), color-stop(100%,rgba(233,60,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(251,131,250,1) 0%,rgba(233,60,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb83fa', endColorstr='#e93cec',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(233,60,236,1);
}
#yellow {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
background: rgb(241,231,103); /* Old browsers */
background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,231,103,1)), color-stop(100%,rgba(254,182,69,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(254,182,69,1);
}
#aqua {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93cede+0,75bdd1+41,49a5bf+100;Blue+3D+%235 */
background: rgb(147,206,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(73,165,191,1);
}
#apple {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2ff52+0,91e842+100;Neon */
background: rgb(210,255,82); /* Old browsers */
background: -moz-linear-gradient(top, rgba(210,255,82,1) 0%, rgba(145,232,66,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(210,255,82,1)), color-stop(100%,rgba(145,232,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(210,255,82,1) 0%,rgba(145,232,66,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,223,45,1);
}
#khaki {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d5cea6+0,c9c190+40,b7ad70+100;Brown+3D */
background: rgb(213,206,166); /* Old browsers */
background: -moz-linear-gradient(top, rgba(213,206,166,1) 0%, rgba(201,193,144,1) 40%, rgba(183,173,112,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(213,206,166,1)), color-stop(40%,rgba(201,193,144,1)), color-stop(100%,rgba(183,173,112,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
border: 1px solid rgba(183,173,112,1);
}
谢谢，祝你今天晚上好！
答案 0 :(得分：1)
看起来你包含了Flex容器的Safari前缀......
.bars {
list-style: none;
display: inline;
height: 450px;
display:-webkit-box;
display:-webkit-flex;
display:-webkit-flexbox;
display:flex;
}
...但你没有参加弹性项目（条形图）。
对CSS进行此调整：
.eachBar {
position: relative;
width: 15%;
float: left;
margin-left:20px;
visibility: hidden;
display: inline-block;
-webkit-align-self: flex-end; /* add prefixed version */
-ms-flex-item-align: end; /* add prefixed version */
align-self: flex-end;
opacity: 0;
-webkit-border-radius: 0.3em 0.3em 0 0;
-moz-box-shadow: inset 0 0 1px 0 #FFF;
-webkit-box-shadow: inset 0 0 1px 0 #FFF;
box-shadow: inset 0 0 1px 0 #FFF;
}
虽然Safari 9支持所有标准的flex属性，但使用Safari 8及更早版本时，您需要使用供应商前缀。
要快速添加所需的所有前缀，请在左侧面板中发布您的CSS：Autoprefixer。
有关flexbox浏览器支持的详细信息，请参阅此处：http://caniuse.com/#search=flexbox