आजको वेब ब्राउजर पागल दिनहरु बाट एक लामो बाटो आएको छ जहाँ कुनै पनि क्रस ब्राउजर स्थिरता इच्छाधारी सोच थियो। आजका वेब ब्राउजरहरू सबै धेरै मानक-अनुपालन हुन्। तिनीहरू राम्ररी साथ खेल्छन् र विभिन्न ब्राउजरमा एकदम राम्रो पृष्ठ प्रदर्शन डेलिभर गर्छन्। यसमा Google Chrome को नवीनतम संस्करण, माइक्रोसफ्ट एज, मोजिला फायरफक्स, ओपेरा, सफारी, र आजको वेबसाईटमा पहुँच गर्न प्रयोग हुने मोबाइल उपकरणहरूको असंख्य विभिन्न ब्राउजरहरू समावेश गर्दछ।
जब यो वेब ब्राउजरमा आउँछ र तिनीहरू कसरी सीएसएस प्रदर्शन गर्दछ भने निश्चित रूपमा बनाइयो, त्यहाँ अझै पनि यी विभिन्न सफ्टवेयर विकल्पहरू बीच विसंगतिहरू छन्। एक सामान्य असंगतता मध्ये एक छ कि तिनीहरू ब्राउजरहरूले डिफल्टमा मार्जिन, प्याडिङ, र सीमानाहरूको गणना गर्दछ।
बक्स मोडेलका सबै पक्षहरूको प्रभावले सबै एचटीएमएल तत्वहरू प्रभाव पार्छ, र किनभने तिनीहरू पृष्ठ लेआउटहरू सिर्जना गर्न आवश्यक छन्, एक असंगत प्रदर्शन यो हो कि पृष्ठ एक ब्राउजरमा राम्रो लाग्न सक्छ, तर अर्को थोरै बन्द गर्नुहोस्। यस समस्याको सामना गर्न, धेरै वेब डिजाइनरहरू बक्स मोडेलको यी पक्षहरूलाई सामान्य बनाउँछन्। यो अभ्यास मार्जिन, प्याडिङ र सीमानाहरूका लागि "शून्य बाहिर" शून्य भनिन्छ।
ब्राउजर डिफल्टहरूमा एक टिप्पणी
वेब ब्राउजरहरू सबैसँग पृष्ठको निश्चित प्रदर्शन पक्षहरूको लागि डिफल्ट सेटिङ्हरू छन्। उदाहरणका लागि, हाइपरलिंकहरू नीलो र पूर्वनिर्धारित रूपमा रेखांकित छन्। यो विभिन्न ब्राउजरहरूमा सजिलो छ, र यद्यपि यो केहि छ कि अधिकांश डिजाइनरहरूले उनीहरूको विशिष्ट परियोजनाको डिजाइन आवश्यकताहरू अनुरूप गर्न परिवर्तन गर्छन्, तथ्य यो हो कि तिनीहरू सबै एउटै पूर्वनिर्धारितसँग सुरू गर्न यो यो परिवर्तन गर्न सजिलो बनाउँछ। दुर्भाग्यवश, मार्जिन, प्याडिङ, र सीमानाहरूको पूर्वनिर्धारित मानले क्रस ब्राउजर स्थिरताको समान स्तरको आनन्द लिदैन।
मार्ग र प्याडिङको लागि मानहरू सामान्यता
असंगत बक्स मोडेलको समस्या समाधान गर्ने उत्तम तरिका HTML तत्वहरूको शून्यमा सबै सीमाहरू र प्याडिङ मानहरू सेट गर्न हो। त्यहाँ केही तरिकाहरू छन् जुन तपाईंले यो गर्न सक्नुहुनेछ यो सीएसआईएल नियम तपाइँको शैलीपट्टीमा थप्न:
* {मार्जिन: 0; padding: 0; }यो CSS नियम * वा वाइल्डकार्ड क्यारेक्टर प्रयोग गर्दछ। त्यो क्यारेक्टर भनेको "सबै तत्वहरू" हो र यसले मूलतया प्रत्येक एचटीएमएल तत्व चयन गर्नेछ र मार्जिन र प्याडिङ सेट गर्नेछ। यद्यपि यो नियम धेरै अज्ञात छ, किनभने यो तपाइँको बाह्य शैलीपट्टीमा रहेको छ, योसँग पूर्वनिर्धारितता पूर्वनिर्धारित ब्राउजर हुनेछ मानहरू गर्छन्। किनकि ती पूर्वनिर्धारितहरू तपाईं अधिलेखन हुनुहुन्छ किनकि, यो एक शैलीले तपाईं के गर्न बाहिर सेट अप पूरा गर्नेछ।
अर्को विकल्प यो मानहरू HTML र शरीर तत्वहरूमा लागू गर्न हो। किनकि तपाईंको पृष्ठको सबै अन्य तत्त्वहरू यी दुइटा तत्वका सन्तान हुनेछन्, सीएसएस क्यास्केडले यी मानहरूलाई ती सबै अन्य तत्वहरूमा लागू गर्नुपर्छ।
html, शरीर {मार्जिन: 0; padding: 0; }यो सबै ब्राउजरहरूमा एकै ठाउँमा आफ्नो डिजाइन सुरु गर्नेछ, तर सम्झना एक कुरा हो जुन तपाइँ सबै मार्जिन र प्याडिङ बन्द गर्नुहुन्छ, तपाइँ चयन गर्न प्राप्त गर्नका लागि तपाइँलाई चयन गरी तपाईको वेब पेजको विशिष्ट भागहरूको लागि फेरि ब्याक अप गर्न आवश्यक पर्दछ। र महसुस गर्नुहोस् कि तपाइँको डिजाईनको लागि कल।
सीमाहरू
तपाईं सोच्न सक्नुहुन्छ "तर कुनै ब्राउजरले शरीर तत्व पूर्वनिर्धारित रूपमा सीमा पार गर्दैन" #:। यो सख्त सच्याइएको छैन। इन्टरनेट एक्सप्लोररको पुरानो संस्करणहरू तत्वहरूको वरिपरी पारदर्शी वा अदृश्य सीमा छ। तपाईँले सीमा सीमा 0 मा सेट नगरेसम्म, यो बोर्डरले तपाइँको पृष्ठ लेआउटहरू खराब गर्न सक्छ। यदि तपाइँले निर्णय गरेको छ कि तपाईं IE को यी पुरातन संस्करणहरूको समर्थन गर्न जारी राख्नुहुन्छ भने, तपाइँलाई तपाइँको शरीर र एचटीएमएल शैलियहरू निम्नद्वारा थप गर्न यो ठेगाना गर्न आवश्यक पर्दछ।
HTML, body {
मार्जिन: 0px;
padding: 0px;
सीमा: 0px;
}
तपाइँ कसरी मार्जिन र प्याडिङ बन्द गर्नुभएका जस्ता कुराहरु, यो नयाँ शैली पनि पूर्वनिर्धारित सिमाना बन्द हुनेछ। तपाईं लेखमा पहिले देखाइएको वाइल्डकार्ड चयनकर्ता प्रयोग गरी एकै कुरा गर्न सक्नुहुनेछ।
जेनिफर क्रिनिन द्वारा मूल लेख। 9/7/16 मा जेरेमी गिरर्ड द्वारा सम्पादित।