2016-07-07 8 views
5

私は最近このウェブサイトを構築しましたHERE、私はフレックスボックスとオートプレフィクサーを使ってこのウェブサイトに多くのものを並べています。あなたがイメージが円の中心に整列されていない見ることができるようにシンプルなフレックスボックスセンタリングコードがサファリ5,6で動作しないのはなぜですか?

enter image description here

は今autoprefixerを使用して、私のinspite、私のクライアントは私のセクションのいずれかの次のスクリーンショットを送りました。最近のブラウザやIE 10以降ではそうではありません。最近のブラウザではすべて正常に動作します。

複数のSOスレッドを訪問した後に私が集めることができたのは、Safari 5+でも接頭辞付きのフレックスをサポートしています。だから私はなぜ私のフレックスコードが動作していないのか分かりません。

HTML:

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2"> 
    <a href=""> 
     <img src="images/focus-feature-points/2.jpg" alt="focus point"> 
    </a> 
    <figcaption> 
     <h3>Engaging Educational Games</h3> 
    </figcaption> 
</figure> 

、次のように<a>タグのCSSは次のとおりです。

.focus-point > a { 
    overflow: hidden; 
    position: relative; 
    border-radius: 50%; 
    border: 3px solid; 
    display: inline-block; 
    height: 260px; 
    width: 260px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-transition: all .3s; 
    transition: all .3s; 
} 

私のクライアントが使用しているのSafariのバージョンは5.1.10サファリです。

フレックスボックスコードはまだ動作しません。

フレックスボックスを部分的にサポートしている古いブラウザ(たとえば、flex-wrap)では、いくつかの高度なフレックスボックスプロパティに問題があるかもしれませんが、わかりますが、この例では最も基本的なフレックスボックスプロパティのみを使用しています。

誰かが私が間違っていることを説明できますか?

ありがとうございます。

答えて

10

6.1より前のSafariでは、previous version of the flexbox specificationsource)をサポートしています。

Safari 5.0,5.1,6.0の場合、display: -webkit-box(その時のdisplay: flex)に加えて、-webkit-box-orientプロパティを使用する必要があります。

これは、フレックスコンテナにその子を整列させる方法を指示します。

初期値はinline-axisです。 verticalまたはhorizontalをお試しください。

これは詳細が仕様内のセクションです:ここ https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

詳細:Flexbox code working on all browsers except Safari. Why?

関連する問題