Flexbox child align-self：Safari 中的 flex-end 问题

【问题标题】：Flexbox child align-self: flex-end issue in SafariFlexbox child align-self：Safari 中的 flex-end 问题
【发布时间】：2016-02-17 18:24:41
【问题描述】：

我在 Safari 中使用弹性框布局时遇到了一些问题。我有一个使用 flexbox 对齐的条形图，但我无法在 safari 中正确实现它。

请查看我的JSfiddle。欢迎所有建议！除 Safari 外，所有浏览器都能正确显示。

小提琴： http://jsfiddle.net/husky999/dq0ha3d5/11/

HTML

<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>

CSS

#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);
}

Javascript

$(document).ready(function() {

    $('#tomato').css({'visibility':'visible', 'height': '0%'}).animate({'opacity':'1', 'height':'90%'}, 1000, 'easeOutExpo');

    $('#pink').css({'visibility':'visible', 'height': '0%'}).stop().delay(200).animate({'opacity':'1', 'height':'70%'}, 1000, 'easeOutExpo');

    $('#yellow').css({'visibility':'visible', 'height': '0%'}).stop().delay(400).animate({'opacity':'1', 'height':'50%'}, 1000, 'easeOutExpo');

    $('#aqua').css({'visibility':'visible', 'height': '0%'}).stop().delay(600).animate({'opacity':'1', 'height':'60%'}, 1000, 'easeOutExpo');

    $('#apple').css({'visibility':'visible', 'height': '0%'}).stop().delay(800).animate({'opacity':'1', 'height':'40%'}, 1000, 'easeOutExpo');

    $('#khaki').css({'visibility':'visible', 'height': '0%'}).stop().delay(1000).animate({'opacity':'1', 'height':'55%'}, 1000, 'easeOutExpo');
});

谢谢，祝你早日愉快！

【问题讨论】：

    标签： html css safari flexbox


    【解决方案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;
}

    Revised Demo

    尽管 Safari 9 支持所有标准的 flex 属性，但在 Safari 8 及更早版本中，您需要使用供应商前缀。

    要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

    有关 flexbox 浏览器支持的详细信息，请参见此处：http://caniuse.com/#search=flexbox

    【讨论】：

    • 真的很感谢@Michael_B。我很笨，因为我一直在 safari 5.1 上测试它：|。我需要制作信息才能在 safari7+ 和最新的 chrome 和 mozilla 上运行网站。
    猜你喜欢
    • 1970-01-01
    • 2014-05-25
    • 2018-02-16
    • 2017-12-06
    • 2021-05-09
    • 2016-08-14
    • 1970-01-01
    • 2013-12-06
    • 2018-07-21
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode