मोबाइल सफारी में लाइन कलाकृतियों

Question

सफारी कुछ वेबसाइटों पर मेरी वेबसाइट पर divs के बीच में काले रेखाएं प्रस्तुत करता है। यह विशेष रूप से खराब होता है जब यह किसी छवि को अलग करता है जिसे बटन या किसी चीज़ के लिए दो अलग-अलग divs में कटा हुआ किया जाता है। मैं दो divs के माता-पिता में बीजी नहीं डाल सकता क्योंकि वे पारदर्शी .pngs हैं। कोई समाधान या बस इसके साथ सौदा?

समस्या का कब्जा, http://i.stack.imgur.com/pTLki.png

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

http://www.apinkdoor.com/show/

Answer 1

TravisO, आप अपने सीएसएस में img स्टाइल से छुटकारा पाने चाहिए! आप का उपयोग करते हैं केवल इस:

<style type="text/css"> 
* 
{ 
    margin: 0px; 
    padding: 0px; 
} 

body 
{ 
    background-color: #f00; 
    text-align: center; 
} 
</style> 

यह अपने iPhone पर ठीक से प्रस्तुत करना चाहिए!

Answer 2

निम्न सीएसएस, एक निर्दिष्ट पृष्ठभूमि-छवि के साथ समस्याग्रस्त div में जोड़ा गया है, यह मेरे लिए तय है। 3px से कम कुछ भी अभी भी कुछ सफारी ज़ूम स्तरों पर प्रकाश कलाकृतियों को दिखाएगा।

margin-top: -3px; /* for Mobile Safari dark line artifact */ 
padding-top: 3px; /* for Mobile Safari dark line artifact */ 

Answer 3

यह समस्या एक गोलाई जब यह प्रदर्शन के लिए पृष्ठभूमि छवियों rescales मोबाइल सफारी में उत्पादित त्रुटि का परिणाम है (: http://openradar.appspot.com/8684766 यह एक बग है)।

समाधान 1 या 2 पीएक्स द्वारा अपने बाएं तरफ अपने दाएं बटन के किनारे की चौड़ाई बढ़ाने के लिए है। फिर तदनुसार अपने सीएसएस को समायोजित करें ताकि आपके द्वारा जोड़े गए 1 या 2 पिक्सल डिफ़ॉल्ट रूप से प्रदर्शित न हों।

Answer 4

मैंने तत्व के पृष्ठभूमि रंग को 'ग्रे सीमा' के साथ बदलकर पाया, इसके लिए मेरे लिए काम किया।

Answer 5

व्यूपोर्ट मेटाटैग के लिए initial-scale मान जोड़ने से मेरे लिए यह समस्या हल हो गई।

<meta name="viewport" content="initial-scale=1.0">

Answer 6

मैं जब एक div टैग में एक .png-छवि प्रदर्शित एक ऐसी ही समस्या थी। एक पतली (1 पीएक्स मुझे लगता है) काले रेखा को छवि के किनारे दिया गया था। इसे ठीक करने के लिए, मुझे निम्नलिखित सीएसएस शैली जोड़नी पड़ी: box-shadow: none;