में फॉर्म का चयन तत्व गलत तरीके से काट दिया गया है, मैं फ़ायरफ़ॉक्स में कुछ चुनिंदा फ़ील्ड के संबंध में कुछ अजीब व्यवहार देख रहा हूं।फ़ायरफ़ॉक्स
व्यूपोर्ट चौड़ाई के आधार पर, 33.333% की चौड़ाई के साथ चयन करें, कभी-कभी इसकी दाएं सीमाएं बंद हो जाएंगी।
कृपया एक उदाहरण के लिए इस बेला देखें: http://jsfiddle.net/pjv0adhw/
क्या मैं एक पूर्ण चौड़ाई के साथ एक क्षैतिज रूप से केंद्रित पैरेंट कंटेनर, एक आंशिक चौड़ाई के साथ एक का चयन युक्त है, तो जैसे:
.parent {
margin: 0 auto; /* centered on viewports > 1200px */
width: 300px;
}
.select {
width: 33.333%;
}
सरलीकृत मार्कअप:
<body>
<div class="parent">
<select class="select">
<option>cat</option>
<option>dog</option>
<option>manatee</option>
</select>
</div>
</body>
अब, फ़ायरफ़ॉक्स पर, जब व्यूपोर्ट चौड़ाई 300px से अधिक है और .parent तत्व केंद्रित है, select अजीब तरीके से व्यवहार करना शुरू कर देता है।
यहां तक कि व्यूपोर्ट चौड़ाई (302px, 1326px) में, सब ठीक है। लेकिन अजीब व्यूपोर्ट चौड़ाई (301px, 1317px) में, चयन की दायां सीमा काट दिया जा रहा है।
मैंने इसे फ़ायरफ़ॉक्स 32-35 में देखा है। अन्य ब्राउज़र विक्रेताओं को प्रभावित नहीं लग रहा है।
इसके अलावा, यह तब होता है जब option एस select से संकुचित होते हैं।
मुझे लगता है कि क्या होता है यह है कि, यदि बाएं ओवर व्यूपोर्ट चौड़ाई एक विषम संख्या है, तो margin: auto; संपत्ति के लिए कुछ गणना आधे पिक्सल की गणना कर रही है और गोल त्रुटियां कर रही है।
मुझे समझ में नहीं आ रहा है कि माता-पिता पर मार्जिन का असर कैसे हो सकता है, जिनकी आंशिक चौड़ाई, जैसा कि मैं इसे समझता हूं, हमेशा 300px की माता-पिता की पूर्ण चौड़ाई के आधार पर गणना की जानी चाहिए ।
क्या मुझे यहां बॉक्स मॉडल के बारे में कुछ मौलिक याद आ रही है, या यह फ़ायरफ़ॉक्स में बस एक बग है? क्या इस मुद्दे के लिए कोई ज्ञात कामकाज है कि मैंने अभी तक खोला नहीं है?
एक sidenote पर, box-sizing: border-box; इस व्यवहार पर कोई प्रभाव नहीं लग रहा है।
