Görünüm penceresini, esnek kutu kapsayıcılarına dayalı bir düzen ile azalttıktan sonra küçük bir fark gördüm. Aşağıdaki kod parçacığı iki kapsayıcı içinde birkaç bağlantı içerir (.container ve .subcontainer). Chrome'da (45 beta), element sınıfına sahip div'lar, görünüm boyutu ne olursa olsun aynı genişliğe sahiptir. Ancak, Firefox'ta (40), her divun genişliği içeriğine bağlı olarak değişir. div genişliği, Firefox vs Chrome'da farklı görünümlerde farklı bir görünüm sergiliyor.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
flex-direction: column;
width: 50%;
}
.element {
flex: 1 0 0;
padding: 0.5em;
text-align: center;
position: relative;
background-color: red;
margin-right: 1em;
}
.subcontainer {
flex: 0 1 auto;
display: flex;
}
.element a {
color: black;
}<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="subcontainer">
<div class="element"><a>abc</a>
</div>
<div class="element"><a>abcdef</a>
</div>
<div class="element"><a>abcdef</a>
</div>
</div>
</div>
</body>
</html>Krom:
Firefox:
Gördüğünüz gibi, kutular Chrome'da aynı genişliğe, ancak Firefox oldukça belirgin ilk kutuyu kısıtlar ve diğer kutuları da aynı tutarak. Bu tutarsızlığın sebebi nedir ve nasıl düzeltebilirim? Her kutu için aynı genişliğe sahip olmak isterim. İlk etapta flex: 1 0 0 kullanmanın amacı buydu. Herhangi İhtiyacınız değeri, ya da sadece 0px için min-width ayarlamak için
Teşekkür
Ne demek 'değişimi görmenize izin vermiyor'? Fx40'ım var ve snippet'i çalıştırırken ekran görüntüsünde yakalanan sorunu görmüyorum. – klaar
Evet. SO'da "Kod snippet'ini çalıştır" özelliğine atıfta bulundum (tarayıcınızın boyutunu kaydırma çubuğu oluşturmadan azaltmanıza izin vermez). Ancak, html snippet'ini başka bir pencerede kullanıyorsanız, yeniden boyutlandırmanız gerekir. tarayıcı farkı görmek için biraz. Bir noktada, Firefox içeriğe bağlı olarak her divun genişliğini değiştirir. –