हाय,
% उपयोगकर्ता नाम% ।
इस प्रकाशन में हम कोड पर विचार करेंगे जो पहली नज़र में हानिरहित लग सकता है - कंटेनर में ग्रेडिएंट बैकग्राउंड के उपयोग के कारण आईई 7-8 में ड्रॉपडाउन जैसा मेनू काम नहीं करेगा।
CSS का एक अच्छा कार्य है -
रैखिक-ढाल () । उसके लिए धन्यवाद, हम वेब विकास में उपयोग के लिए बहुत जटिल ग्रेडिएंट बनाने में सक्षम हैं। लेकिन यहां इंटरनेट एक्सप्लोरर ब्राउज़र, नौवें संस्करण तक शामिल है, यह फ़ंक्शन ब्राउज़र स्तर पर इसके समर्थन की कमी के कारण नहीं करता है और इसके बजाय, सीएसएस गुणों के रूप में इसका अपना कार्यान्वयन है और इसके लिए विशेष महत्व है। प्रविष्टि कुछ इस तरह दिखती है:
div { filter: progid:DXImageTransform.Microsoft.Gradient(params); -ms-filter: "progid: DXImageTransform.Microsoft.Gradient(params); }
नई Microsoft विनिर्देशन के अनुसार -ms-फ़िल्टर संपत्ति एक रिकॉर्ड है।
IE के लिए ढाल फिल्टर के बारे में अधिक जानकारी htmlbook पर पाई जा सकती है: http://htmlbook.ru/css/filter/gradientयह कुछ भी नया और मनोरंजक नहीं लगता है, है ना? लेकिन, IE के लिए बैसाखी के विशाल बहुमत में, इस कार्यान्वयन के सही संचालन की शत प्रतिशत मामलों में उम्मीद नहीं की जानी चाहिए।
त्रुटि विवरण और प्रजनन
ढाल का निर्माण करने के लिए फ़िल्टर, पुराने IE में असमर्थित CSS नियमों के सभी कार्यान्वयनों की तरह, जावास्क्रिप्ट का उपयोग करके संसाधित किया जाता है, और अतिरिक्त अतिरिक्त त्रुटियों को हटाता है।
मैं यह नहीं कह सकता कि बग महत्वपूर्ण है, लेकिन दूर के लोगों की श्रेणी से नहीं। प्लेबैक के लिए, हमें बच्चों के तत्वों के चयनकर्ता का उपयोग करके शुद्ध HTML और CSS में लागू क्लासिक ड्रॉप-डाउन मेनू की आवश्यकता है।
मैंने एक उदाहरण के लिए सबसे सरल मेनू को स्केच किया:
एचटीएमएल <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>-ms-filter bug in IE 7-8</title> <meta name="description" content="A bug occurs in IE 7-8 when using the -ms-filter and CSS dropdown menu." /> <meta name="keywords" content="ms filter, css filter, bug, microsoft, habrahabr demo" /> <meta name="author" content="BR0kEN, Firstvector.org" /> <link rel="stylesheet" href="menu.css" /> </head> <body role="document"> <ul class="nav wrap clr"> <li class="active"><a href="">Home</a></li> <li><a href="">Currency</a></li> <li><a href="">Macroeconomic analysis</a> <ul class="sub-menu"> <li><a href="">Dean's FX</a></li> <li><a href="">Economic exposure</a></li> <li><a href="">Market pulse</a></li> <li><a href="">Central bank watch</a></li> </ul> </li> <li><a href="">Technical analysis</a> <ul class="sub-menu"> <li><a href="">Forex</a> <ul class="sub-menu"> <li><a href="">USD</a></li> <li><a href="">GBP</a></li> <li><a href="">EUR</a></li> <li><a href="">AUD</a></li> </ul> </li> </ul> </li> <li><a href="">Forex news</a></li> <li><a href="">Economic calendar</a></li> <li><a href="">Education</a></li> </ul> </body> </html>
menu.css body { font-size:16px; font-family:Arial, Verdana; background:#f5f5f5; } a { text-decoration:none; -webkit-transition:all linear .3s; -moz-transition:all linear .3s; transition:all linear .3s; } ul { padding:0; width:1024px; margin:0 auto; list-style:none; } .clr:before, .clr:after { content:''; display:table; } .clr:after { clear:both; } .nav { background:#4f4f4f; background:-moz-linear-gradient(top,#4f4f4f 0%,#494949 21%,#343434 67%,#292929 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4f4f4f),color-stop(21%,#494949),color-stop(67%,#343434),color-stop(100%,#292929)); background:-webkit-linear-gradient(top,#4f4f4f 0%,#494949 21%,#343434 67%,#292929 100%); background:-o-linear-gradient(top,#4f4f4f 0%,#494949 21%,#343434 67%,#292929 100%); background:-ms-linear-gradient(top,#4f4f4f 0%,#494949 21%,#343434 67%,#292929 100%); background:linear-gradient(to bottom,#4f4f4f 0%,#494949 21%,#343434 67%,#292929 100%); border-bottom:1px solid #cbcbca; } .nav > li { float:left; } .nav > li, .nav > li > a { color:#fff; border-right:1px solid #dedede; } .nav li { position:relative; line-height:34px; } .nav > li:hover, .nav > .active { background:#635f5f; background:-moz-linear-gradient(top,#635f5f 0%,#5a5656 30%,#484545 70%,#3f3c3c 100%); background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,#635f5f),color-stop(30%,#5a5656),color-stop(70%,#484545),color-stop(100%,#3f3c3c)); background:-webkit-linear-gradient(top,#635f5f 0%,#5a5656 30%,#484545 70%,#3f3c3c 100%); background:-o-linear-gradient(top,#635f5f 0%,#5a5656 30%,#484545 70%,#3f3c3c 100%); background:-ms-linear-gradient(top,#635f5f 0%,#5a5656 30%,#484545 70%,#3f3c3c 100%); background:linear-gradient(to bottom,#635f5f 0%,#5a5656 30%,#484545 70%,#3f3c3c 100%); } .nav a { display:block; color:#505050; padding:0 12px; font-size:16px; text-transform:capitalize; } .nav .sub-menu { display:none; position:absolute; z-index:9999; left:-2px; top:100%; width:230px; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.3); } .nav .sub-menu ul { top:40%; left:95%; } .nav li:hover > ul { display:block; } .nav .sub-menu li { border-bottom:1px dotted #ccc; } .nav .sub-menu li:hover > a { background:#e8e8e8; }
ie.css .nav { zoom:1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0); } .nav > .active, .nav > li:hover { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#635f5f',endColorstr='#3f3c3c',GradientType=0); }
ie7.css .nav .sub-menu { border:1px dotted #ccc; } .nav .sub-menu a { height:34px; }
डेमो: http://firstvector.org/examples/ms-filter/index.htmlमेनू के लिए मूल शैलियों को ऊपर वर्णित किया गया है और वे IE को छोड़कर सभी ब्राउज़रों के लिए अभिप्रेत हैं। इसके अलावा, पहली सशर्त टिप्पणी के अंदर, नौवें और पुराने संस्करणों के IE के लिए शैली हैं, दूसरे के अंदर - सातवें के लिए (सामान्य रूप से सातवें से नीचे के सभी संस्करणों के लिए, लेकिन वे हमें रुचि नहीं देते हैं)।
इसलिए, जैसा कि हम याद करते हैं, IE9 से शुरू होकर,
-ms-रैखिक-ग्रेडिएंट () फ़ंक्शन काम नहीं करेगा और
ie.css फ़ाइल से -ms-फ़िल्टर संपत्ति
इसे बदलने के लिए आएगी।
घटनाओं के कालक्रम
IE9 - सब कुछ उसी तरह काम करता है जैसा उसे करना चाहिए।
IE8 - हम देखते हैं कि कोई ड्रॉप-डाउन मेनू नहीं है।
यद्यपि, यदि आप चयनित क्षेत्र को करीब से देखते हैं, तो आप देखेंगे कि मेनू प्रदर्शित होता है, हालांकि इसका व्यवहार ऐसा है जैसे कि इसके माता-पिता में से कोई एक
overflow: hidden; । लेकिन हम जानते हैं कि इसका अस्तित्व नहीं है और हम जानते हैं कि ऐसा क्यों हुआ। हम निम्नलिखित सामग्री को
ie.css फ़ाइल में छोड़ देते हैं:
.nav { zoom:1; }
और जांच - सब कुछ काम करता है, लेकिन ग्रेडिएंट को बलिदान करना पड़ा।
हम
IE.cs को उसके मूल रूप में लौटाते हैं और
IE7 में संचालन क्षमता की जांच करते हैं - यह काम नहीं करता है।
के बाद से उम्मीद है आठवें संस्करण में, यह भी था। लेकिन, दिलचस्प बात यह है कि इस संस्करण में त्रुटि को ठीक करने के लिए, आपको केवल आइटम पर मँडराते समय प्रदर्शित होने वाली ढाल को हटाने की आवश्यकता है। आइए फॉर्म में दिए गए
ie.cs को
लाएं :
.nav { zoom:1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f',endColorstr='#292929',GradientType=0); } .nav > .active { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#635f5f',endColorstr='#3f3c3c',GradientType=0); }
और जांच - यह फिर से काम करता है, लेकिन हॉवर प्रभाव एक नीरस रंग का उपयोग करता है।
नोट: इस त्रुटि को पुन : उत्पन्न करने के लिए, संपत्ति के नाम को कैसे लिखा जाए, इसमें कोई अंतर नहीं है: -ms-filter या बस फ़िल्टर , बग किसी भी मामले में खुद को महसूस करेगा।परिणाम
अक्सर, लेआउट डिजाइनरों को दृश्य तत्वों के लिए एक ढाल पृष्ठभूमि की उपस्थिति के साथ एक क्षैतिज ड्रॉप-डाउन मेनू बनाने के कार्य से निपटना पड़ता है। इसलिए, लेआउट में सावधान रहें और क्रॉस-ब्राउज़र संगतता की जांच करें। मुझे उम्मीद है कि इस लेख में वर्णित त्रुटि किसी को सही दिशा में निर्देशित करेगी।
पीएस मुझे इसमें कोई संदेह नहीं है कि वर्णित स्थितियों के अलावा, आप एक ही जमीन पर समान लोगों को पुन: उत्पन्न कर सकते हैं, या इसके विपरीत - आने वाले अन्य तरीकों का पता लगा सकते हैं।
आपका ध्यान देने के लिए धन्यवाद।