2011-03-27 22 views
17

के लिए एचटीएमएल 5 और CSS3 मुझे एक वेब एप्लिकेशन मिला है जहां फ्रंट एंड नए एचटीएमएल 5 टैग (हेडर, एनएवी, सेक्शन टैग) और नए CSS3 स्टाइल विशेषताओं (गोलाकार सीमाओं) का उपयोग करता है। वेबसाइट Google क्रोम और सफारी में अद्भुत लग रही है।आईई 7 और आईई 8

हालांकि, ग्राहक अब शिकायत करता है कि वेबसाइट आईई 7 और आईई 8 के लिए टूटा हुआ है। सबकुछ संरेखण से बाहर है और अधिकांश शैलियों को प्रस्तुत नहीं किया जाता है।

इस वेबसाइट को आईई 7 और आईई 8 में काम करने का सबसे आसान तरीका क्या है? क्या मुझे यह करना है: ए) आईई ब्राउज़र को नई HTML5 और CSS3 सुविधाओं को स्वीकार करने के लिए कुछ हैक लागू करें? बी) सामने के अंत का एक पूर्ण पुनर्लेखन?

उत्तर

27

Try this lovely script (.js) :)
और गोलाकार कोनों मैं का उपयोग an other script (.htc)

1 का उपयोग करने के लिए:

-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-khtml-border-radius: 4px; 
border-radius: 4px; 
behavior: url(border-radius.htc); 

मुबारक sitebuilding :)

:

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

की तरह 2 का उपयोग

मूल लिंक अब सक्रिय नहीं है और HTML5shiv स्थानांतरित हो गया है।

GitHub

पर

अब उपलब्ध https://github.com/aFarkas/html5shiv

+2

अब यह एक उत्कृष्ट उत्तर है !! एचटीएमएल 5shiv – DarkThrone

2

आप css3pie http://css3pie.com/ जो css3 मुद्दों के साथ मदद मिलेगी की कोशिश कर सकते।

5

एचटीएमएल 5 के लिए, मैं Remy Sharp's HTML5 Shim की सिफारिश करता हूं, हालांकि प्रभाव देखने के लिए, आपके आईई उपयोगकर्ताओं को जावास्क्रिप्ट सक्षम होना होगा। असल में यह आईई 6/7/8 में एक त्रुटि का फायदा उठाता है जो document.createElement फ़ंक्शन का उपयोग करके जावास्क्रिप्ट में पहली बार बनाए गए HTML तत्वों को पहचानने की अनुमति देता है।

आपके सीएसएस के लिए, कुछ प्रभाव हैंक CSS3 PIE हैं जो CSS3 व्यवहार को अनुकरण करने के लिए "व्यवहार" संपत्ति (जो IE के लिए अद्वितीय है) का उपयोग करते हैं। हालांकि, मैंने व्यक्तिगत रूप से इनसे इनकार किया है, क्योंकि मेरे अनुभव में, वे बहुत आसानी से तोड़ते हैं, और वे मूल्यवान होने की तुलना में अधिक परेशानी का सामना करते हैं। मैं इसके बजाय अपने सीएसएस को लिखता हूं ताकि यह आईई में शानदार ढंग से घट जाए, ताकि गोलाकार बटन स्क्वायर दिखें, लेकिन फिर भी अच्छा लग रहा है।

1

कार्ल और एलिस्टेयर में जोड़ने के लिए, मुझे अपनी साइट में CSS3Pie के साथ कोई समस्या आई। मैंने चार महीने पहले से अपने सीएसएस कोड का उपयोग किया था और CSS3 ग्रेडियेंट <input type="text"/> फ़ील्ड को आई 7 या आईई 8 में दिखने से अवरुद्ध कर रहे थे। केवल तभी जब मैंने अपनी साइट पर दोबारा गौर किया और देखा कि उनका नया सीएसएस कोड काम करता है।

सबक हमेशा सबसे हाल ही में कोड

2

modernizr http://modernizr.com/ के लिए प्लग-इन वेबसाइटों की जाँच कर रहा है एक अच्छा विकल्प हो जाएगा।

+0

की सिफारिश करने के लिए +1 मैंने साइट पर आधुनिकज़र स्थापित किया है लेकिन आईई 8 में पूरी तरह से टूटा हुआ स्टाइल बनाने में कोई फर्क नहीं पड़ता है। – MJCoder

1

नए अर्थपूर्ण टैग के बावजूद, यदि आप आईई 7/8 में CSS3 प्रभाव का उत्पादन करना चाहते हैं, तो आप निश्चित रूप से आईएस 7/8 के लिए फ़ॉलबैक के रूप में एएसपी नेट ग्राफिक्स कक्षाओं का उपयोग कर सकते हैं। .NET ग्राफिक्स का उपयोग करके बनाए जा सकने वाले कुछ प्रभाव हैं -

सीमा-त्रिज्या, रैखिक ढाल, रेडियल ढाल, बॉक्स-छाया ..

आप इन प्रभावों को ग्राफिक्स कक्षाओं का उपयोग करके एएसपीनेट पेज में बना सकते हैं और उस पृष्ठ को किसी भी HTML तत्व की पृष्ठभूमि छवि के रूप में प्रस्तुत कर सकते हैं। अर्थात

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div> 

या

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" /> 

जहां पैरामीटर मूल्य प्रभाव बनाने के लिए आवश्यक उत्पादन के मामले में इनपुट कर रहे हैं। यानी ऊंचाई, चौड़ाई, रंग इत्यादि