Hey guys Geçenlerde bu web sitesini HERE kurdum ve bu web sitesinde bir çok şeyi hizalamak için flexbox ve autoprefixer kullandım. Eğer görüntüler çemberin merkezinde hizalanmamıştır görebileceğiniz gibiNeden basit flexbox merkezleme kodu safari 5 ve 6'da çalışmıyor?
:
Şimdi autoprefixer kullanarak bana rağmen, başını müvekkilim bana bölümlerden birinin aşağıdaki ekran gönderdi. Bu, tüm yeni tarayıcılarda ve IE 10+ sürümlerinde geçerli değildir, her şey son tarayıcılarda düzgün çalışıyor.Birden çok SO iş parçacığı ziyaret ettikten sonra ne toplayabildiğim bile safari 5+ bile önekler ile esnek destekler. Bu yüzden esnek kodumun neden çalışmadığına dair hiçbir fikrim yok. Müvekkilim kullandığı Safari
.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;
}
versiyonu safari 5.1.10 geçerli:
HTML: aşağıdaki gibi
<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>
Ve <a> etiketinin CSS olduğunu.
Birisi bana neden önekli kodu kullanmamıza rağmen neden flexbox kodumun çalışmadığını açıklayabilir mi?
Ayrıca, bazı gelişmiş flexbox özelliklerinin eski tarayıcılarda kısmen desteklemesine neden olan (örn. flex-wrap) sorunların olabileceğinin farkındayım, ancak gördüğünüz gibi bu örneklemde yalnızca en temel flexbox özelliklerini kullandım.
Birisi neyi yanlış yaptığımı açıklayabilir mi?
Teşekkür ederiz.
.. teşekkürler :) –