2008-09-17 11 views
24

वेब पेज को सही ढंग से प्रदर्शित करना सभी प्रमुख ब्राउज़रों को आजकल बहुत ही समय लेने वाला कार्य है।सभी ब्राउज़रों में सीएसएस को समान रूप से प्रस्तुत करने का सबसे आसान या तेज़ तरीका

क्या सीएसएस शैली बनाने का कोई आसान तरीका है जो हर ब्राउज़र में समान दिखता है? या कम से कम आपके पास इस काम को आसान बनाने के लिए कुछ सुझाव हैं?

उत्तर

33

मैं सभी "रीसेट" सुझाव और "ग्रिड" ढांचे सुझाव से सहमत हैं, लेकिन मैं सलाह के एक बिट जोड़ने के लिए करना चाहता था: लक्ष्य प्रत्येक ब्राउज़र में समान व्यावहारिक रूप से, अविश्वसनीय है क्योंकि आप ग्राहक को नियंत्रित नहीं कर सकते हैं। मामले में मामला: फोंट।

आप सीएसएस में अपने फ़ॉन्ट शैली लेकिन कुछ लिनक्स मशीनों, कुछ Mac, कुछ मोबाइल ब्राउज़र की घोषणा - आपके द्वारा निर्दिष्ट फ़ॉन्ट नहीं होगा। इस बदलाव से भिन्न टेक्स्ट लम्बाई और रैपिंग होती है। फिर ब्राउज़र संस्करणों और ऑपरेटिंग सिस्टम का प्रत्येक संस्करण चल रहा है; ज़ूम सुविधाओं को कैसे लागू करते हैं विभिन्न ब्राउज़र; और टेक्स्ट आकार को अंतिम उपयोगकर्ता द्वारा समायोजित किया जा सकता है। समान प्रतिपादन केवल एक अविश्वसनीय लक्ष्य है।

लेकिन दिल ले लो! यह सीएसएस का "कला" हिस्सा है: आपके डिज़ाइन में लचीला होने में सक्षम होने के कारण ब्राउज़र, ऑपरेटिंग सिस्टम और एंड-यूजर समायोजन के बीच भिन्नताएं सुन्दर तरीके से संभाली जाती हैं। समान प्रतिपादन के लिए प्रयास न करें - आपको ब्रांड स्थिरता + उपयुक्त अनुभव + लचीलापन के लिए प्रयास करना चाहिए।

+2

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

+2

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

+0

अधिक सहमत नहीं हो सका। यह एक फिसलन ढलान है जो "निश्चित ऊंचाई" लेआउट (shudder) के साथ समाप्त होता है। – da5id

12

eric meyer reset या YUI reset जैसे सीएसएस रीसेट का उपयोग करने का प्रयास करें। मदद करेगा लेकिन प्रत्येक ब्राउज़र में चीजों को समान दिखने के लिए कोई आसान या सही तरीका नहीं है

4

Yahoo css foundation मदद करेगा। स्वरूपण को मानकीकृत करने के लिए आप रीसेट और बेस चाहते हैं।

0

Yahoo User Interface (YUI) में CSS Reset कार्यान्वयन है जो सभी ब्राउज़रों में एक सामान्य आधारभूत रेखा बनाने का प्रयास करता है। यह आपको बहुत करीब मिलना चाहिए।

0

यह वास्तव में एक कठिन सवाल है - सभी ब्राउज़रों? क्या इसका मतलब सभी संस्करण है? मोबाइल ब्राउज़र? बस "मुख्य रेखा" वाले (ओपेरा, फ़ायरफ़ॉक्स, यानी और सफारी)?

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

आप एक परीक्षण सीएसएस लाइब्रेरी या फ्रेमवर्क जैसे याहू ग्रिड (http://developer.yahoo.com/yui/grids/) या Google के वेब टूलकिट (http://code.google.com/webtoolkit/) जैसे प्रोग्रामेटिक इंटरफ़ेस का भी उपयोग कर सकते हैं।

+0

आवश्यक नहीं सभी प्रमुख लेकिन – nicudotro

2

अपने सीएसएस का परीक्षण सभी ब्राउज़रों पर करें जैसे आप जाते हैं। यह केवल अपने पालतू ब्राउज़र में पिक्सेल को सही करने के लिए भयानक है यह पता लगाने के लिए कि यह अन्य ब्राउज़रों में बंद है।

इस दृष्टिकोण को लेकर आपको यह समझने में मदद मिलेगी कि सभी प्रमुख ब्राउज़रों पर क्या काम करेगा।

0

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

+0

फ्लोट के साथ सहमत हैं। मैं हाल ही में फ्लोट्स का उपयोग कर अपनी पोर्टफोलियो वेबसाइट (सुंदर जटिल सीएसएस के साथ) बना रहा था। और जब मैंने ब्राउज़र में इसे चेक किया तो आश्चर्यचकित हुआ। यह आईई 6 को छोड़कर सभी ब्राउज़रों में समान प्रस्तुति दे रहा था। – Dmitris

2

मुझे एरिक मेयर सीएसएस रीसेट का उपयोग करके सफलता मिली है here। यह मूल रूप से ब्राउज़र सीएसएस शैलियों का एक गुच्छा ओवरराइड करता है जो डिफ़ॉल्ट हैं। ऐसा कहकर, अभी भी बहुत सारे मतभेद हैं (शायद कुछ जो आपको बॉक्स मॉडल मतभेदों जैसे परेशान कर रहे हैं, आदि। उस स्थिति में, Blueprint का उपयोग अपने सीएसएस को संभालने के लिए बेहतर हो सकता है।

+0

ब्लूप्रिंट का एक नया यूआरएल है: http://www.blueprintcss.org/ – Colin

2

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

2

आप एक ढांचे को भी देख सकते हैं Blueprint या css-boilerplate याजैसे सीएसएस के लिएढांचा। आम तौर पर, ये ढांचे आपको सीएसएस कक्षा परिभाषाओं के मानक सेट के साथ सेट करते हैं जिन्हें आप तत्वों पर एक विशिष्ट और परिभाषित तरीके से बाहर रखने के लिए आवेदन कर सकते हैं।

2

यदि इसे पिक्सेल-परिपूर्ण होने की आवश्यकता है, तो आपको अपनी स्टाइलशीट में पीएक्स का उपयोग करने की आवश्यकता होगी।css reset stylesheet का उपयोग करें, फिर पिक्सल के आधार पर सबकुछ आकार दें।

यह सुनिश्चित करने के लिए कि आपका सीएसएस विभिन्न ब्राउज़रों में सही ढंग से प्रस्तुत कर रहा है, आपको BrowserShots जैसी सेवा मिल सकती है, हालांकि, मुझे लगता है कि आपको सभी ब्राउज़रों में पूर्ण स्थिरता प्राप्त करना बहुत मुश्किल लगेगा।

मेरे निजी पसंद, सही मार्कअप और सीएसएस का उपयोग बाहर छोड़ किसी भी browserhacks, और डिजाइन लेआउट शान से नीचा दिखाने के लिए है।

7

मैं हमेशा एक बुनियादी सीएसएस शैली पत्रक जो फ़ायरफ़ॉक्स तरह W3C पूरी तरह से संगत ब्राउज़रों में काम करता है बना लिया है और उसके बाद अन्य ब्राउज़रों, यानी IE6, IE7 आदि में किसी भी स्टाइल मुद्दों को ठीक करने के लिए वैकल्पिक ब्राउज़र विशिष्ट स्टाइल शीट बनाई

उचित आईई स्टाइल शीट का चयन करने के लिए आप HTML के भीतर निम्न कोड का उपयोग कर सकते हैं।

<!--[if lte IE 6]> 
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" /> 
<![endif]--> 

तुम भी विभिन्न ब्राउज़रों में अपनी साइट को देखने के लिए इस तरह के रूप में browsershots ऑनलाइन वेबसाइटों का उपयोग कर सकते हैं।

0

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

मेरे पास Yahoo User Interface Base CSS का उपयोग करके सकारात्मक परिणाम हुए हैं, लेकिन अंत में यह सीएसएस के साथ अधिक जटिल वस्तुओं का सामना नहीं कर सका।

अंत मैं एक से कम सही समाधान के लिए चला गया और बस में मेरी ढांचे की जांच किए गए अगर मैं ब्राउज़र-विशिष्ट शैली की स्थापना की।

यहां चित्रित करने के लिए एक PHP स्निपेट है। भाषा-विशिष्ट समाधान के लिए क्षमा करें, लेकिन मुझे लगता है कि विचार काफी स्पष्ट अलग अलग भाषाओं में लागू करने के लिए है:

$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n"; 
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension)) 
    $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n"; 
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension)) 
    $sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n"; 
कोई गुम फ़ाइलों को कोई न पहचाना टैग या अन्य कोड है कि कुछ ब्राउज़रों गला घोंटना सकता है के साथ

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

0

मैं Blueprint और 960 Grid System पर एक नज़र लेने की सलाह देते हैं।

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

2

एक सख्त सिद्धांत के अनुरूप कई मतभेदों का भी ख्याल रखेगा। इसके अलावा, मैं आम तौर पर शरीर के भीतर सब कुछ को घेरने के लिए < div> टैग जोड़ता हूं, क्योंकि मैंने देखा है कि फ़ायरफ़ॉक्स बनाम यानी बॉडी टैग को शीर्ष स्तर तत्व के रूप में कैसे संभालते हैं।

2

मैं पहली फ़ायरफ़ॉक्स के खिलाफ विकासशील तरह, अक्सर रीसेट के लिए याहू के YUI (और पेज की बुनियादी संरचना के लिए ग्रिड) का उपयोग कर, और IE सशर्त निर्देशों का उपयोग कर प्रारूप ओवरराइड करने कि IE, सभी अपने – एक-हेम में – ज्ञान , अलग-अलग संभालती है।

अनुक्रमणिका।एचटीएमएल

<head>
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />

<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>

4

सबसे पहले आप एक रीसेट, कुछ अन्य लोगों का उल्लेख यहाँ की तरह की कोशिश कर सकते हैं, तो आप एक त्वरित मार्जिन और गद्दी सीएसएस के इस टुकड़े के साथ रीसेट कर सकते हैं:

*{margin: 0; padding: 0} 

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

आपके पास होने वाली अधिकांश लेआउट समस्याओं का शायद बॉक्स मॉडल के इंटरनेट एक्सप्लोरर के wrong interpretation के कारण होगा, आप एक ही समय में चौड़ाई और मार्जिन या पैडिंग सेट करके कभी भी इससे बच सकते हैं। यह परेशान प्रतीत हो सकता है लेकिन ऐसा नहीं है, केवल उस सामग्री पर पैडिंग या मार्जिन लागू करें जो आपके तत्व के अंदर है जिसमें चौड़ाई सेट है।

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

इसके अलावा, आप अपनी साइट browsershots परीक्षण की आवश्यकता है, तो इसे जल्दी करने के लिए एक मुक्त तरीका है।

+0

मेरा काम केवल आईई 6 या एनएन 4 का उपयोग करने की अनुमति देता है। पागल नहीं, हम मजबूर हैं। :) – rball

+0

आईएमओ को कार्यस्थल में दुर्व्यवहार के रूप में आईई 6 गणना का उपयोग करने के लिए मजबूर होना पड़ रहा है। ;) – DisgruntledGoat

9

अपने काम प्रवाह को निम्न तरीके से व्यवस्थित करें और इससे बहुत समय बर्बाद हो जाएगा।

  1. सुनिश्चित करें कि आप एक दस्तावेज़-प्रकार घोषित करें।
  2. अन्य लोगों ने यहां उल्लेख किए गए रीसेट विधियों में से एक का उपयोग करें।
  3. आपकी संरचना पर काम
  4. उसी तत्व पर चौड़ाई और पैडिंग का उपयोग करने से बचें।
  5. हमेशा हर समय जोड़ने के बजाय अनियंत्रित HTML और CSS को कम करने के बारे में सोचें।
  6. फ्लोटिंग तत्वों के दौरान मार्जिन बाएं और दाएं का उपयोग न करने का प्रयास करें।

यदि आप उन वस्तुओं से चिपके रहते हैं, तो बहुत से सामान्य मुद्दे प्रकट नहीं होंगे।

पीएस एक आइटम जो मैं उल्लेख करना भूल गया था वह W3 पर वैधकर्ताओं का उपयोग करना था।

0

मैं आमतौर पर W3C CSS validator के खिलाफ विकसित होता हूं, फिर चीजों को सत्यापित करता हूं कि मैं उन्हें संबंधित ब्राउज़र में किस तरह से देखना चाहता हूं। मान्य व्यवहार के प्रति मान्यता एक लंबा रास्ता तय करता है।

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

0

सीएसएस ढांचे निश्चित रूप से मदद करते हैं, हालांकि वे शैलियों के ढेर के कारण आसानी से भारी हो सकते हैं जिनकी आपको आवश्यकता नहीं होगी या उपयोग नहीं किया जाएगा।

Targeting IE Using Conditional Comments and Just One Stylesheet स्थिति पर अधिक है, सीएसएस हैक्स का उपयोग किए बिना आईई संस्करण-विशिष्ट शैलियों को खिलाने के लिए एक महान तकनीक के लिए सब कुछ है; यह आपको ब्राउजर के बजाय चयनकर्ता द्वारा शैली नियमों को एक साथ रखने की अनुमति देता है।

4

उचित DOCTYPE शामिल करना सुनिश्चित करें।

मैं अब भी नियमित रूप से बॉक्स मॉडल के मुद्दों से निपटने वाले लोगों को देखता हूं क्योंकि वे एक डॉक्टरेट को शामिल करना भूल गए हैं। उचित कार्यप्रणाली के बिना इंटरनेट एक्सप्लोरर "quirks मोड" में प्रस्तुत करता है, और इसलिए अन्य ब्राउज़रों को कुछ हद तक करते हैं। यदि आप उचित कार्यप्रणाली शामिल करते हैं, तो ब्राउज़र "मानक मोड" पर स्विच करते हैं और एक-दूसरे के समान व्यवहार करते हैं।

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

2

पहले फ़ायरफ़ॉक्स के लिए विकसित करें। आप अन्य ब्राउज़रों में परीक्षण कर सकते हैं लेकिन फ़िक्स के बारे में चिंता न करें जब तक यह फ़ायरफ़ॉक्स में आप इसे कैसे काम नहीं करते हैं। फिर अन्य मानक-आधारित ब्राउज़र, अर्थात् सफारी और ओपेरा पर जाएं। यदि आपने अच्छा HTML और CSS लिखा है, तो इन ब्राउज़रों में अधिक काम की आवश्यकता नहीं है।

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

जैसा कि पहले उल्लेख किया गया था, एरिक मेयर की तरह एक सीएसएस रीसेट एक अच्छा प्रारंभिक बिंदु है, अपनी आवश्यकताओं के आधार पर अपना खुद का रीसेट बनाने के लिए इसका इस्तेमाल करें। इसके अलावा उत्तर सरल है: कोई चांदी की बुलेट नहीं है।

-1

डिजाइन टिनफ़ोइल टोपी को लागू करने

सीएसएस:

*{display:none} 
+0

ठीक है, यह पूरी तरह से क्रॉस ब्राउज़र नहीं है। सभी ब्राउज़र भी सीएसएस का समर्थन नहीं करते हैं। –

5

यह समय पहली बार में लेने वाली है, खासकर अगर आप DIV + सीएसएस की रस्सियों सीखने stilling कर रहे हैं। हालांकि, आपने पर्याप्त अभ्यास करने के बाद और पर्याप्त समस्याओं से मुलाकात की और उन्हें सभी हल कर लिया, आपको ज्ञान होगा कि क्या काम करता है और क्या काम नहीं करता है।

तब आप जानते हैं कि पहली जगह में सबसे संगत शैली को कैसे लिखना है, इस प्रकार डिगगिंग में हर समय बचत करना और शायद ही कभी किसी भी प्रमुख आधुनिक ब्राउज़र के साथ कोई समस्या हो: आईई 6, आई 7, एफएफ 2, एफएफ 3, ओपेरा 9, सफारी 3 विन/मैक।

हां, यह संभव है और जितना आसान हो सके उतना आसान हो सकता है। उन्हें एक-एक करके अभ्यास करें और जीतें, फिर आप जानते हैं कि पहले प्रयास में चीजों को सही तरीके से कैसे करना है।

खैर एकमात्र परेशान राक्षस आईई 6 मुझे लगता है। यह inbrowser है। इसके अलावा, एफएफ 2, एफएफ 3, ओपेरा 9, सफारी जीत/मैक, यानी 7, यानी 8 रेंडरिंग इंजन में अपेक्षाकृत समान हैं, कम से कम आईई 6 के मुकाबले बहुत कम बग के साथ।

  1. उपयोग एक reset पहले:

    मैं अधिकतम सीएसएस अनुकूलता प्राप्त करने के लिए कोडिंग में आपके लिए कुछ सर्वोत्तम प्रथाओं (जो सिर्फ सीएसएस में अपनी यात्रा शुरू हो गया है) है। यह आपके दिमाग को साफ़ करता है और आपके काम के प्रत्येक चरण को सुनिश्चित करता है।

  2. उसी तत्व पर पैडिंग (बाएं और दाएं) और चौड़ाई का उपयोग न करें जब तक कि आप अच्छी तरह से नहीं जानते कि यह कैसे काम करेगा।
  3. यदि कोई तत्व फ़्लोट किया गया है, तो उसके माता-पिता ओवरफ़्लो दें: छुपाएं और ऊंचाई: 1% यदि माता-पिता के पास पहले से ऊंचाई नहीं है।
  4. दोनों तत्व मार्जिन-टॉप या मार्जिन-तल दोनों को न दें, लेकिन केवल मार्जिन-टॉप या मार्जिन-तल। क्योंकि आसन्न तत्वों के मार्जिन एक-दूसरे में गिर जाते हैं, जिससे पदों को नौसिखियों के लिए कुछ हद तक अप्रत्याशित बना दिया जाता है।
  5. यदि कोई तत्व फ़्लोट किया गया है, तो इसे डिस्प्ले दें: इनलाइन
  6. जेड-इंडेक्स पर भरोसा न करें जब तक कि आपकी स्क्रिप्टिंग को इसकी आवश्यकता न हो।
  7. यदि आईई 6 में अजीब कुछ भी होता है, तो उस तत्व पर ऊंचाई का उपयोग करें: 1%

मेरे अनुभवों के अनुसार, ये ऐसी चीजें हैं जो वास्तव में संभावित समस्याओं को हल करने में आपकी मदद करेंगे। उनका उपयोग करें और वे 80% द्वारा किसी भी समय उपभोग करने वाली समस्या पर ठोकर खाने की संभावनाओं को खत्म कर देते हैं। वास्तव में विशिष्ट टैग से निपटने के दौरान इनसे अधिक छोटी युक्तियां होती हैं लेकिन चलिए इसे एक दिन कहते हैं।

0

आप गलत सवाल पूछ रहे हैं, क्योंकि यहां कि जवाब देने के लिए एक ही रास्ता है:

<!DOCTYPE html> 
<html> 
<head> 
    <style>* { background: #fff }</style> 
</head> 
<body></body> 
</html> 

एक जवाब की ज्यादा नहीं, यह क्या है? :)

बाकी सब यहीं है - हर ब्राउज़र में अपने सीएसएस काम बनाने के लिए, यह ही बनाने की कोशिश कर नहीं है। आप नहीं कर सकते

2

Do websites need to look exactly the same in every browser?

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

जितना अधिक आप लेआउट उद्देश्यों के लिए सीएसएस का उपयोग करते हैं, उतनी अधिक समस्याएं आप सामना करेंगे, और अधिक समस्याएं आपको एक तरह से मिलेंगी और जितना अधिक आप सीखेंगे। पूरी तरह संरचित, अर्थपूर्ण एचटीएमएल और neat'n'tidy सीएसएस के साथ लेआउट बनाने के कुछ सालों के बाद मुझे शायद ही कभी एक या दूसरे ब्राउज़र में त्रुटियों को सही करने में काफी समय व्यतीत करना पड़ता है।

2
  • एक रीसेट का प्रयोग करें झलकी
  • वेब मानकों के साथ विकसित
  • अपने मार्कअप और सीएसएस
  • मान्य करें एक तत्व की ही भागों
  • उपयोग आईई सशर्त,
  • पर मार्जिन और गद्दी का उपयोग न करें
  • उन सभी ब्राउज़रों में परीक्षण जिन्हें आप समर्थन करना चाहते हैं
  • समझें कि सही सही नहीं है, लेकिन यो आप बहुत करीब हो सकते हैं।
संबंधित मुद्दे