'da hatalı şekilde kesildi Firefox'ta seçme alanları oluşturma konusunda bazı garip davranışlar görüyorum.Form seçme öğesi, Firefox
Vitrin genişliğine bağlı olarak, 33.333% genişliğinde bir seçim, bazen doğru kenarlıklarının kesilmesine neden olacaktır. , Kesirli genişliğe sahip bir seçme içeren, http://jsfiddle.net/pjv0adhw/
Ne var mutlak genişlikte bir yatay merkezli üst kapsayıcı olduğunu şöyle:
.parent {
margin: 0 auto; /* centered on viewports > 1200px */
width: 300px;
}
.select {
width: 33.333%;
}
Basitleştirilmiş işaretleme:
<body>
<div class="parent">
<select class="select">
<option>cat</option>
<option>dog</option>
<option>manatee</option>
</select>
</div>
</body>
Şimdi, Firefox'ta, görünüm genişliği 300 pikselden daha geniş ve .parent öğesi ortalandığında, select tuhaf şekilde davranmaya başlar.
Görüntü genişliklerinde bile (302px, 1326px), her şey yolunda. Ancak garip viewport genişliklerinde (301px, 1317px), seçimin sağ sınırı kesiliyor.
Bunu Firefox 32-35'de gördüm. Diğer tarayıcı satıcıları etkilenmiyor gibi görünüyor.
Ayrıca, bu yalnızca option s select'dan daha dar olduğunda olur.
Şu durumda, soldaki görüntü alanı genişliğinin tek bir sayı olması durumunda, margin: auto; özelliğinin bazı hesaplamalarının yarım piksel sayıldığını ve yuvarlama hataları oluşturduğunu tahmin ediyorum.
Anlayamadığım şey, ebeveyn üzerindeki marjların çocuklarında herhangi bir etkiye sahip olup olmadığının, fraksiyonel genişliğinin, anladığım kadarıyla, her zaman ebeveynin 300px mutlak genişliğine göre hesaplanması gerektiğidir. .
Kutu modeliyle ilgili temel bir şey eksik mi, yoksa bu sadece Firefox'ta bir hata mı? Bu konu için henüz kazılmadığım bilinen bir çözüm var mı?
Bir sidenote üzerinde, box-sizing: border-box; bu davranış üzerinde herhangi bir etkisi yok gibi görünüyor.
