<इनपुट प्रकार = "सबमिट करें"> सफारी मोबाइल पर पैडिंग बग?

Question

(यह (भी अनुत्तरित) प्रश्न #3430506 के समान है, लेकिन एचटीएमएल 5 तत्वों के बजाय इनपुट टैग करने के लिए लागू होता है।)

< इनपुट प्रकार पर = "सबमिट करें" > बटन, iPhone/मोबाइल सफ़ारी ब्राउज़र कहते हैं बाएं और दाएं पैडिंग। यह डेस्कटॉप संस्करण पर नहीं होता है, न ही किसी अन्य मोबाइल/डेस्कटॉप वेबकिट ब्राउज़र मैंने कोशिश की है। ऐसा लगता है कि प्रत्येक पक्ष में पीएक्स में फ़ॉन्ट आकार जोड़ना प्रतीत होता है (यानी 14 पीएक्स फ़ॉन्ट का मतलब है कि कुल चौड़ाई 14 पीएक्स + पाठ + 14 पीएक्स की चौड़ाई है)।

वर्तमान में मैं इसे हटाने के लिए निम्नलिखित कोशिश कर रहा हूँ: कोई नहीं ... यह कोई फर्क नहीं पड़ता:

/* webkit user-agent stylesheet uses input[type="submit"] */ 

form input[type="submit"] { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
} 

मैं -webkit-उपस्थिति का उपयोग कर के बारे में प्रतिक्रियाओं के बहुत देखा है। न तो गोलाकार कोनों को हटा देता है। मैंने एक पृष्ठ बनाया है कि डेस्कटॉप संस्करण विभिन्न-वेबकिट-उपस्थिति ऑब्जेक्ट्स को कैसे प्रस्तुत करता है; सभी में -वेबिट-सीमा-त्रिज्या है: 0 और उपरोक्त कोड लागू है।

डेस्कटॉप सफारी पर इन को देखने तो iPhone का प्रयास करें:
http://deleri.com/test.html

(सफारी मोबाइल एक iPhone के बिना उन लोगों के लिए स्क्रीनशॉट :)
deleri.com/safari.png

मैं अच्छा लगेगा जबकि करने के लिए पता है कि यह बग क्यों होता है, अभी मैं इसे ठीक करने के बारे में अधिक चिंतित हूं। मैंने हर प्रकार के डिस्प्ले/ओवरफ्लो/बॉक्स-साइजिंग/-वेबकिट-कुछ भी/चौड़ाई की कोशिश की है: ऑटो/टेक्स्ट-इंडेंट विकल्प कल्पनाशील है, और मैन्युअल रूप से चौड़ाई को सेट करके इसे ठीक नहीं कर सकता है (अंतिम चौड़ाई प्रतिशत- आधारित, और अजीब पैडिंग अभी भी लागू होता है)। मुझे आश्चर्य है कि यह कुछ अस्पष्ट संपत्ति है, या यदि उपयोगकर्ता एजेंट स्टाइलशीट ओवरराइट नहीं किया जा रहा है। कोई विचार?

Answer 1

यदि आप पैडिंग को एक विशाल मूल्य पर सेट करने का प्रयास करते हैं, तो 100px कहें, आप देखेंगे कि ऊपर और नीचे पैडिंग बढ़ती है, जबकि फिर से बाएं और दाएं डिफ़ॉल्ट सफारी में मोबाइल सफारी में रहती हैं। तो मुझे लगता है कि यह मानना ​​सुरक्षित है कि आईओएस की वेबकिट रूटीन में बग के रूप में यह काफी सरल मायने रखता है, और जब तक ऐप्पल समस्या को हल नहीं करता तब तक कोई प्रत्यक्ष समाधान नहीं होता है।

एक कामकाज एक डीआईवी बनाने के लिए होगा जो आपको चाहे जो भी दिखता हो, और अपने फॉर्म को सबमिट करने वाले एक ऑनक्लिक हैंडलर को जोड़ें। वास्तविक सबमिट बटन का उपयोग करने की कोई ज़रूरत नहीं है।

Answer 2

यह एक Daft सुझाव हो सकता है, लेकिन अगर समस्या

<input type="submit" /> 

साथ है आप के लिए

<button type="submit" /> 

कौन सा एक ही बात करता है लेकिन बग नहीं हो सकता इसे बदलने की कोशिश कर सकते?

Answer 3

क्या आपके पास फॉर्म पर नियंत्रण है? उर्फ: क्या आपने मैन्युअल रूप से फॉर्म दर्ज किया था?

तो या तो एक आईडी या वर्ग टैग जोड़ते हैं तो करने के लिए इसे

<input type="submit" id="submit" value="submit"> 

तो

form input #submit { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
} 

Answer 4

मैं आज इस बग में भाग जब मेरी माँ ने मुझे बताया कि एक पृष्ठ मैं था करने के लिए अपने सीएसएस समायोजित अपने पुराने आईफोन 3 जी पर टेक्स्ट लापता था।निश्चित रूप से, मैंने अपनी पत्नी के पुराने 3 जी को निकाल दिया है, हम किसी दराज में किसी भी जगह झूठ बोल रहे हैं, और मेरे बटनों में से एक पर पाठ को तरफ धकेल दिया जा रहा है क्योंकि सफारी कुछ विशाल दूरी को सम्मिलित कर रहा है।

अच्छी खबर यह है कि नवीनतम अपडेट में (बिल्कुल पता नहीं है, लेकिन मुझे एक अपडेट किया गया आईफोन 4 मिला है), यह बग तय कर दिया गया है।

बुरी खबर यह है कि यदि उपयोगकर्ता अपने ब्राउज़र को अपडेट नहीं करते हैं, तो मुझे टैग का उपयोग न करने के बाहर इसके आसपास कोई रास्ता नहीं मिल रहा है।

अभी मेरी सलाह मोबाइल सफारी के संस्करण की जांच करना है। यदि वे नवीनतम संस्करण (या जो भी संस्करण इस बग या उच्चतर को तय करते हैं) चला रहे हैं, तो उन्हें बटन के साथ पृष्ठ मिलता है। यदि नहीं, तो वे बटन बनाने के लिए उपयोग किए जाने वाले वैकल्पिक टैग वाले पृष्ठ परोस सकते हैं। मेरे पृष्ठ पर यह अच्छा नहीं लग रहा है, और यह थोड़ा अजीब है, लेकिन मैं साइट के मोबाइल या डेस्कटॉप संस्करणों के आधार पर ब्राउज़र देख रहा हूं, इसलिए यह इसके शीर्ष पर बहुत अधिक नहीं है।

उम्मीद है कि इससे मदद मिलती है।

Answer 5

मेरे पास एक समान समस्या थी और मैंने देखा कि जब मैं बैकग्राउंड को केवल सादे पृष्ठभूमि-रंग की बजाय पृष्ठभूमि में सेट करता हूं तो मेरा समस्या हल हो जाती है।

यह किसी भी तरह सिर्फ गद्दी मूल्यों

#submit{ 
    background:#a0b9dc; 
    padding:9px 35px; 
} 

नजरअंदाज कर कोड के नीचे बटन सबमिट पर मेरे लिए गद्दी समस्या हल हो गई।

#submit{ 
    background:#a0b9dc; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC)); 
    background: -o-linear-gradient(bottom, #A0B9DC 0%); 
    background: -moz-linear-gradient(bottom, #A0B9DC 0%); 
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%); 
    background: -ms-linear-gradient(bottom, #A0B9DC 0%); 
    background: linear-gradient(to bottom, #A0B9DC 0%); 
    padding:9px 35px; 
}