私は最近このウェブサイトを構築しましたHERE、私はフレックスボックスとオートプレフィクサーを使ってこのウェブサイトに多くのものを並べています。あなたがイメージが円の中心に整列されていない見ることができるようにシンプルなフレックスボックスセンタリングコードがサファリ5,6で動作しないのはなぜですか?
:
は今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
)では、いくつかの高度なフレックスボックスプロパティに問題があるかもしれませんが、わかりますが、この例では最も基本的なフレックスボックスプロパティのみを使用しています。
誰かが私が間違っていることを説明できますか?
ありがとうございます。
..ありがとう:) –