IE8 में अस्पष्टता सीएसएस काम नहीं कर रहा है

Question

मैं jQuery के स्लाइड-डाउन सेक्शन के लिए ट्रिगर टेक्स्ट को इंगित करने के लिए CSS का उपयोग कर रहा हूं: यानी जब आप ट्रिगर टेक्स्ट पर होवर करते हैं तो कर्सर पॉइंटर में बदल जाता है और यह इंगित करने के लिए ट्रिगर टेक्स्ट की अपारदर्शिता कम हो जाती है कि टेक्स्ट में क्लिक एक्शन है ।

फ़ायरफ़ॉक्स और क्रोम में यह ठीक काम करता है, लेकिन IE8 में अस्पष्टता नहीं बदलती है।

मैंने बिना किसी सफलता के विभिन्न प्रकार की CSS सेटिंग्स आज़माई हैं।

उदाहरण के लिए

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

सीएसएस:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

IE क्या अस्पष्टता को रोक रहा है? नोट: मैंने इसे विभिन्न तत्वों की एक किस्म पर आज़माया है, सीएसएस कथनों के क्रम को राउंड स्वैप करते हुए, और केवल IE स्वयं के उपयोग से। मैंने भी प्रयोग करने की कोशिश की है

-ms-filter: "alpha(opacity=75)";

लेकिन कोई सफलता नहीं मिली।

मैं IE8 में काम करने की अस्पष्टता संशोधन प्राप्त करने की कोशिश करने के लिए चीजों से बाहर चला गया।

कोई विचार?

Comments

इस संबंधित / डुप्लिकेट प्रश्न का आपका उत्तर मुझे लगता है। stackoverflow.com/questions/859000/opacity-in-web-pages

— जेफ मार्टिन

मैंने देखा कि सवाल - जवाब का जवाब है: <br> <br> & nbsp; & nbsp; फ़िल्टर: अल्फा (अपारदर्शिता = 50); / * इंटरनेट एक्सप्लोरर / <br> & nbsp; & nbsp; अपारदर्शिता: 0.5; / एफएक्स, सफारी, ओपेरा, क्रोम * / <br> & nbsp; & nbsp; एमएस-फ़िल्टर: "ProgID: DXImageTransform.Microsoft.Alpha (अस्पष्टता = 50)"; / * IE8 * / <br> <br> मेरे लिए काम नहीं करता है (मैं सिर्फ इसे दोबारा जांचने की कोशिश करता हूं)। मैंने इसे एक h3 पर लागू किया जो कि काला और बोल्ड था। फ़ायरफ़ॉक्स और क्रोम में ओपेसिटी सेटिंग हेडिंग ग्रे हो जाती है, जैसा कि आप उम्मीद करते हैं, लेकिन IE8 में यह काला रहता है।

ओह - आपको यह महसूस नहीं हुआ कि आपको टिप्पणियों में HTML का उपयोग करने की आवश्यकता नहीं है - लेकिन मुझे लगता है कि आप देख सकते हैं कि मैं क्या कहने की कोशिश कर रहा हूं

यदि आप सिर्फ एक ठोस रंग div पर उन शैलियों की कोशिश करते हैं तो वे काम करते हैं? हो सकता है कि कुछ अन्य सीएसएस चल रहा है जो परस्पर विरोधी है।

— जेफ मार्टिन

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

Answer 1

कोई विचार नहीं अगर यह अभी भी 8 पर लागू होता है, लेकिन ऐतिहासिक रूप से IE उन तत्वों पर कई शैलियों को लागू नहीं करता है जिनमें "लेआउट नहीं है।"

देखें: http://www.satzansatz.de/cssd/onhavinglayout.html

Comments

IE उन तत्वों पर कई शैलियों को लागू नहीं करता है जिनमें "लेआउट नहीं है।"

— अज़ीम.बट

महान! धन्यवाद। यही समस्या थी। तत्वों को मैं (जैसे h3) के लिए अस्पष्टता को समायोजित करने की कोशिश कर रहा था "लेआउट नहीं है"। एक बार मैंने उन्हें कुछ दिया, अपारदर्शिता ने काम किया। मैंने जो कुछ भी किया था वह सभी चौड़ाई: 100% थी; h3 के लिए। मुझे सही दिशा बताने के लिए धन्यवाद। हालाँकि, यह पागल (यदि छोटी गाड़ी नहीं है) लगता है कि इंटरनेट एक्सप्लोरर ऐसा करता है।

IE बहुत सारे तत्वों पर बहुत सारी शैलियों को लागू नहीं करता है।

— danwellman

@danwellman और फिर यह बहुत सारे अन्य "मज़ेदार" सामान भी करता है। वाह।

— दुवेद

दिलचस्प है, कि IE7 को। लेआउट की आवश्यकता नहीं है ”। मैं शून्य ऊंचाई के साथ तत्व पर उत्तरदायी पृष्ठभूमि छवि का उपयोग कर रहा हूं padding-bottom: 100%और IE8 में अपारदर्शिता प्रभावी नहीं हुई जब मैंने स्पष्ट ऊंचाई निर्धारित की। IE7 को इसकी आवश्यकता नहीं है।

— कोट्ट

Answer 2

इन्हें सेट करना (जैसे मैंने लिखा है) ने मुझे जरूरत पड़ने पर सेवा दी है:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Comments

धन्यवाद, मेरा मानना ​​है कि "फ़िल्टर: अल्फा (अपारदर्शिता = 70);" IE <8 के लिए है। हालाँकि, यह IE8 में काम नहीं करता है (मेरे लिए) (मैंने अभी जाँच की है)। -मोज़-अपारदर्शिता अब मुझे विश्वास है कि बहुत अधिक अयोग्य है, और अस्पष्टता चीजों को करने का मानक तरीका है - इसलिए, स्वाभाविक रूप से, माइक्रोसॉफ्ट ने चीजों को करने के तरीके का उपयोग नहीं किया (वैसे बहुत आसान है)।

केवल "अस्पष्टता" और "फ़िल्टर" सेट करना, जैसा कि आप वर्णन करते हैं कि यह मेरे लिए FF4 और IE8 दोनों में काम करने के लिए पर्याप्त था। -मोज-अपारदर्शिता जरूरी नहीं थी।

— दानवकुंडनी

@ गैब्रिएल मैकएडम्स: फ़िल्टर: अल्फा (अपारदर्शिता = 70); काम किया (लेकिन IE 8 केवल में)

— पूनम भट्ट

@ गैब्रिएल ने एक ट्रीट का काम किया! मैं IE 7/8 में कोई अधिक अस्पष्टता समस्या नहीं होगी!

— MJCoder

अधिक विशिष्ट जानकारी: वास्तव में यह फीका है। यह विधि पारदर्शिता को दूर करती है।

— tmorell

Answer 3

आपको मानकों-अनुरूप ब्राउज़रों के लिए पहले Opacity सेट करने की आवश्यकता है, फिर IE के विभिन्न संस्करण। उदाहरण देखें:

लेकिन यह अपारदर्शिता कोड ie8 में काम नहीं करता है

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

ध्यान दें कि मैंने -moz को फ़ायरफ़ॉक्स के रूप में समाप्त कर दिया है, एक मानक शिकायत ब्राउज़र है और यह पंक्ति अब आवश्यक नहीं है। इसके अलावा, -ttml का मूल्यह्रास किया जाता है, इसलिए मैंने उस शैली को भी समाप्त कर दिया।

इसके अलावा, IE के फिल्टर w3c मानकों के लिए मान्य नहीं होंगे, इसलिए यदि आप चाहते हैं कि आपका पृष्ठ मान्य हो, तो नीचे दिए गए IE कथन का उपयोग करके अपने IE स्टाइलशीट से अपनी मानक स्टाइलशीट को अलग करें:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

यदि आप अलग-अलग quirks करते हैं, तो आपकी साइट ठीक-ठीक मान्य होगी।

Comments

केवल "अस्पष्टता" और "फ़िल्टर" सेट करना, जैसा कि आप वर्णन करते हैं कि यह मेरे लिए FF4 और IE8 दोनों में काम करने के लिए पर्याप्त था। "/ * अगली 2 लाइनें IE8 * /" लेबल वाला अनुभाग आवश्यक नहीं था।

— दानवकुंडनी

@demoncodemonkey: सही है। यह सब इस बात पर निर्भर करता है कि आपने कौन सा संस्करण स्थापित किया है। यदि आप अधिकतम अनुकूलता चाहते हैं, तो मैं उन सभी का सुझाव देता हूं।

— केविन फ्लोरिडा

सही, लेकिन: "यह सुनिश्चित करने के लिए कि इंटरनेट एक्सप्लोरर 7 और 8 दोनों के उपयोगकर्ता फ़िल्टर का अनुभव करते हैं, आप ऊपर सूचीबद्ध दोनों वाक्य रचनाओं को शामिल कर सकते हैं। हमारे पार्सर में ख़ासियत के कारण, आपको पुराने सिंटैक्स से पहले अपडेट किए गए सिंटैक्स को शामिल करना होगा। संगतता दृश्य में ठीक से काम करने के लिए फ़िल्टर के लिए (यह एक ज्ञात बग है और IE8 के अंतिम रिलीज पर तय किया जाएगा)। यहां एक सीएसएस स्टाइलशीट उदाहरण है: "(स्रोत: लिंक )

— zrathen

@ केविन "यदि आप अधिकतम अनुकूलता चाहते हैं तो मैं उन सभी का सुझाव देता हूं"। ठीक है, तो, आपको हटाया नहीं जाना चाहिए -मोज़-अपारदर्शिता, है ना?

— डरावना

-Ms-filter के लिए उद्धरण आवश्यक नहीं हैं।

— थूडन

Answer 4

जाहिरा तौर पर अल्फा पारदर्शिता केवल IE में ब्लॉक स्तर के तत्वों पर काम करती है। सेट डिस्प्ले: ब्लॉक।

Answer 5

का उपयोग करते हुए display: inline-block;IE8 पर काम करता है इस समस्या को हल करने के लिए।

FWIW, opacity: 0.75सभी मानकों के अनुरूप ब्राउज़रों पर काम करता है।

Answer 6

सीएसएस

मैंने CSS- ट्रिक्स से निम्नलिखित का उपयोग किया :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

दिशा सूचक यंत्र

हालाँकि, एक बेहतर उपाय यह है कि आप ओपेसिटी कम्पास मिक्सिन का उपयोग करें , इसके लिए आपको बस इतना करना है @include opacity(0.1);और यह आपके लिए किसी भी क्रॉस-ब्राउज़र समस्या का ध्यान रखेगा। आप यहां एक उदाहरण पा सकते हैं ।

Answer 7

यहाँ IE 8 के लिए जवाब है

और यह IE8 में काम करने के लिए अल्फा के लिए काम करता है

स्थिति: रिश्तेदार या अन्य।

http://www.codingforums.com/showthread.php?p=923730

Answer 8

ऊपर दिए गए किसी भी उत्तर ने मेरे लिए काम नहीं किया, इसलिए मैंने सिर्फ अपने DIV टैग को एक पारदर्शी पृष्ठभूमि छवि दी, जिसने सभी ब्राउज़रों के लिए पूरी तरह से काम किया।

Answer 9

यह कोड काम करता है

filter: alpha(opacity = 50); zoom:1;

आपको इसे काम करने के लिए ज़ूम प्रॉपर्टी को जोड़ना होगा :)

Answer 10

IE6-8 में देशी अपारदर्शिता उपयोग को सक्षम करने के लिए आप एक पॉलीफ़िल भी जोड़ सकते हैं।

https://github.com/bladeSk/internet-explorer-opacity-polyfill

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

उपयोग सरल है

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>