Widzę dziwne zachowanie w Firefoksie w odniesieniu do pól wyboru formularza.Element wyboru formularza jest nieprawidłowo obcięty w przeglądarce Firefox
W zależności od szerokości rzutni, wybór przy, powiedzmy, szerokości 33.333% może czasami spowodować odcięcie jego prawej krawędzi.
proszę zobaczyć ten skrzypce na przykład: http://jsfiddle.net/pjv0adhw/
Co mam jest wyśrodkowany w poziomie kontenera nadrzędnego bezwzględną szerokości, zawierające select o szerokości frakcyjnej, tak:
.parent {
margin: 0 auto; /* centered on viewports > 1200px */
width: 300px;
}
.select {
width: 33.333%;
}
uproszczony markup:
<body>
<div class="parent">
<select class="select">
<option>cat</option>
<option>dog</option>
<option>manatee</option>
</select>
</div>
</body>
Teraz, w przeglądarce Firefox, gdy szerokość okienka jest szersza niż 300 pikseli, a element .parent jest wyśrodkowany, select zaczyna zachowywać się dziwnie.
W równych szerokościach widoku (302px, 1326px) wszystko jest w porządku. Ale w dziwnych szerokościach rzutni (301px, 1317px), prawa krawędź zaznaczenia jest obcięta.
Widziałem to w przeglądarce Firefox 32-35. Inni dostawcy przeglądarek nie wydają się być dotknięci.
Ponadto dzieje się tak tylko wtedy, gdy option s są węższe niż .
Zgaduję, że to, co się dzieje, to, że jeśli szerokość lewej widocznej lewej strony jest liczbą nieparzystą, niektóre obliczenia dla właściwości margin: auto; zliczają półpiksele i powodują błędy zaokrąglania.
To, czego nie mogę zrozumieć, to to, jak marginesy na rodzicu mogą mieć jakikolwiek wpływ na jego dzieci, których ułamek szerokości, jak rozumiem, powinien zawsze być obliczany na podstawie absolutnej szerokości rodzica 300px .
Czy brakuje mi czegoś podstawowego na temat modelu pudełkowego, czy jest to po prostu błąd w Firefoksie? Czy istnieje znane rozwiązanie tego problemu, którego jeszcze nie wykopałem?
Na stronie internetowej box-sizing: border-box; nie ma żadnego wpływu na to zachowanie.
