ब्राउज़र पर ज़ूम आउट करने से स्टाइलिंग समस्याएं

Question

फ़ायरफ़ॉक्स (और अधिकांश अन्य ब्राउज़रों) पर ज़ूम आउट करते समय, दाईं ओर-बार और शीर्ष मेनू ब्रेक का लेआउट होता है। साइड-बार पृष्ठ के नीचे कूदता है। इस मुद्दे को दोहराने के लिए, कृपया visit the site और:

1. Zoom Out ब्राउज़र दृश्य मेनू के तहत कई बार पता लगाएं और इसे क्लिक करें।
2. ध्यान दें कि यह मेनू और साइडबार को कैसे प्रभावित करता है।

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

निश्चित रूप से, इस मुद्दे के लिए एक बेहतर समाधान होना चाहिए। क्या आप जानते है?

Answer 1

शीर्ष मेनू के लिए, आप divposition:relative करने के लिए दो ul की लपेटकर सेट करने का प्रयास कर सकते हैं, और फिर right:0 के एक अतिरिक्त सीएसएस घोषणा के साथ position:absolute को ul#mega तत्व निर्धारित किया है। ऐसा लगता है कि इस तरह के मुद्दों को ठीक करने के लिए पूर्ण स्थिति एक अच्छा क्रॉस-ब्राउज़र तरीका प्रतीत होता है।

साइडबार के लिए, आप position:absolute और right:0 से div#sidebar पर सेट कर सकते हैं। सफारी जारी करने के लिए

विचार प्रक्रिया 1:

तो 'अधिक' मेनू चौड़ाई शीर्ष मेनू में अलग है, position:relative;z-index:11; को ul#secondary-menu सेट करके देखें। फिर, li को अन्य li के तहत, li को साफ़ करके विभिन्न ज़ूम पर विभिन्न ब्राउज़र चौड़ाई मूल्यांकनों की भरपाई करने के लिए li.mmoreli.mmore बच्चे को पैडिंग-बाएं जोड़ सकते हैं। फिर, रंगीन रेखा को चौड़ा करने के लिए, border-bottomali.mmore से li.mmore के बच्चे से घोषणाएं और तदनुसार ऊंचाई समायोजित करें।

Answer 2

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

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

यह CSS3 स्केलिंग के साथ उलझन में नहीं है, जो आपको मनमाने ढंग से स्केल करने की अनुमति देता है (और वास्तव में किनारों में स्क्रीन पिक्सेल से संरेखित नहीं हो सकता है), क्योंकि यह किसी भी तरह से लेआउट को प्रभावित नहीं करता है।

संपादित करें: उदाहरण: आकार कॉलम प्रतिशत

#left-area { width: 66.3179%; /* 634/956 */ } 
#right-area { width: 33.6820%; /* 322/956 */ } 

Answer 3

जब आप ब्राउज़र पिक्सेल मान जरूरी गोल कर रहे हैं आकार बदलने के लिए, और sidebar और left-area की जरूरत नहीं है, जहां यह एक समस्या के लिए अग्रणी है का उपयोग करते हुए साइड-बाय-साइड फिट करने के लिए पर्याप्त कमरा, और आप इसे पृष्ठ के निचले भाग में देख सकते हैं।

main-content की चौड़ाई 956 पीएक्स, left-area: 634px, sidebar: 322px है।

634 + 322 = 956.

जब आप में ज़ूम, मूल्यों

633 + 321 = 954> 953

किसी भी हार्डकोडेड पिक्सेल मान इस पूर्णांकन समस्या है करने के लिए जा रहे हैं, पर विचार कर रहे हैं पर्सेंट का उपयोग करना