Question

我的flexbox在safary上工作不正常，所有的盒子都相互缩小。我测试了windows safari版本5.1.7

这是html代码：

<div class="container">
        <div class="statistics-box">
            <div class="statistics-item">
                <span class="value">2,300</span>
                <p class="title">Destinations</p>
            </div>
            <div class="statistics-item">
                <span class="value">1,000</span>
                <p class="title">Cities</p>
            </div>
            <div class="statistics-item">
                <span class="value">35,000</span>
                <p class="title">Boats</p>
            </div>
            <div class="statistics-item">
                <span class="value">50,000</span>
                <p class="title">Sailors</p>
            </div>
        </div>
  </div>

这是css代码：

.statistics-box {
    display: -webkit-box;
    display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   padding: 20px 10px;
   width: 100%;
   background: #ffffff;
   border-radius: 5px;
   -webkit-box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15);
   box-shadow: 0px 0px 30px 0px rgba(52, 52, 52, 0.15);
}



.statistics-box .statistics-item {
   flex: 1;
   padding: 10px 0;
}

 .statistics-box .statistics-item:not(:last-of-type) {
      border-right: 1px solid #d4d4d4;
   }

通过添加：

来修复

 statistics-box .statistics-item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 ;
    -ms-flex: 1 ;
    flex: 1 ;
    padding: 10px 0;
  }

Answer 1

windows safari版本5.1.7不支持flex。

如果您在mac safari中测试您的网站，那就没问题了。

显示：flex不能在safari上工作

1 个答案: