केवल IE पर शैली लागू करें

Question

यहाँ सीएसएस का मेरा ब्लॉक है:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

मैं केवल IE 7, 8, और 9 "देखना" चाहता हूं width: 100%

इसे पूरा करने का सबसे सरल तरीका क्या है?

Comments

आप ऐसा करने की कोशिश क्यों कर रहे हैं? IE के कौन से संस्करण (लक्ष्य) आप लक्षित कर रहे हैं? IE10 के बारे में क्या? (सामान्य सशर्त टिप्पणियों का समर्थन नहीं करता है)

— ९

मैं IE 7, 8 और 9 को निशाना बनाने की कोशिश कर रहा हूं

— FastTrack

आपको IE9 को लक्षित करने के लिए क्या कारण हो सकता है लेकिन IE10 नहीं ? मुझे जानना अच्छा लगेगा ...

— 21

IE width: autoउसी तरह से अन्य ब्राउज़रों जैसे कि फ़ायरफ़ॉक्स या क्रोम के रूप में ब्लॉक तत्वों के लिए व्याख्या नहीं करता है। क्रोम / फ़ायरफ़ॉक्स width:autoमें एक ब्लॉक तत्व की चौड़ाई को उसके कंटेनर की पूरी चौड़ाई का विस्तार करेगा। IE ऐसा नहीं करता है और इसकी आवश्यकता हैwidth: 100%

— FastTrack

क्या किसी ने यह कोशिश की है? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— Pramesh Bajracharya

Answer 1

अपडेट 2017

पर्यावरण के आधार पर, सशर्त टिप्पणियों को IE10 + में आधिकारिक तौर पर हटा दिया गया है और हटा दिया गया है।

---

मूल

अपने HTML में इंटरनेट एक्सप्लोरर सशर्त टिप्पणी का उपयोग करने का सबसे सरल तरीका है :

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

वहाँ कई हैक्स (जैसे अंडरस्कोर हैक ) आप का उपयोग कर सकते हैं जो आपको अपनी स्टाइलशीट के भीतर केवल IE को लक्षित करने की अनुमति देगा, लेकिन यदि आप सभी प्लेटफार्मों पर IE के सभी संस्करणों को लक्षित करना चाहते हैं तो यह बहुत गड़बड़ हो जाता है।

Comments

क्या मेरी सीएसएस फ़ाइल के अंदर उस सशर्त टिप्पणी का उपयोग करने का कोई तरीका है? मैं अपने HTML को अव्यवस्थित करने से बचना चाहता था अगर मैं इसकी मदद कर सकता था।

— फास्टट्रैक

@FastTrack - नहीं, सशर्त टिप्पणियां HTML टिप्पणियां हैं, ताकि उन्हें आपके मार्कअप में दिखाई दे। मैं सिर्फ IE के लिए एक पूरी नई स्टाइलशीट बनाने की प्रवृत्ति रखता हूं, और फिर इसे सशर्त टिप्पणियों के भीतर सामान्य रूप से शामिल करता हूं।

— जेम्स एल्डिस

जेम्स: मैं ऐसा करने के बारे में सोच रहा था, लेकिन फिर मुझे हर बार दो अलग-अलग स्टाइलशीट को अपडेट करने के लिए संघर्ष करना पड़ता है, मैं कुछ बदलना चाहता हूं, है ना?

— फास्टट्रैक

@FastTrack - नहीं, आपकी IE स्टाइलशीट में केवल IE के लिए विशिष्ट शैलियाँ होंगी। अपनी मुख्य स्टाइलशीट के बाद इसे शामिल करें ताकि आप अपनी मुख्य स्टाइलशीट में सेट की गई शैलियों को ओवरराइड कर सकें जहाँ आवश्यक हो। यदि आप IE के लिए कुछ विशिष्ट बदलना चाहते हैं तो आपको केवल इसे अपडेट करने की आवश्यकता होगी।

— जेम्स एल्डिस

@ फैस्टट्रैक - हां। जब किसी चीज़ को एक से अधिक स्टाइलशीट में निर्दिष्ट किया जाता है, तो बाद में शामिल की गई मिसाल पर चलती है।

— जेम्स एल्डिस

Answer 2

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

स्पष्टीकरण: यह एक Microsoft- विशिष्ट मीडिया क्वेरी है। Microsoft IE के लिए विशिष्ट -ms- उच्च-विपरीत संपत्ति का उपयोग करना, यह केवल इंटरनेट एक्सप्लोरर 10 या अधिक में पार्स किया जाएगा। मैंने मीडिया क्वेरी के दोनों मान्य मूल्यों का उपयोग किया है, इसलिए यह केवल IE द्वारा पार्स किया जाएगा, चाहे उपयोगकर्ता उच्च विपरीत सक्षम हो या न हो।

Comments

केवल यह नए इंटरनेट-एक्सप्लोरर (एज) पर काम नहीं करता है, इसे एमएस के बिना जोड़ने की जरूरत

— साद अहमद

लक्ष्यीकरण बढ़त के लिए यहाँ देखें: stackoverflow.com/questions/28417056/…

— फीलिस सदरलैंड

@ साअहमद: क्या वास्तव में कोई समस्या है? एज एक बहुत अच्छी तरह से व्यवहार किया गया ब्राउज़र है, जो किसी भी तरह से बहुत बेहतर है, इसलिए कई IE हैक शायद आवश्यक (या विवेकपूर्ण) नहीं होंगे?

— माइकल शीपर

ठीक है कि मेरी बेवकूफ IE समस्याओं को हल किया। ठीक करने के लिए धन्यवाद!

— जेस्टर

@MichaelScheper पहली टिप्पणी में पोस्ट किया गया यह बग अभी भी नवीनतम बढ़त (आज के लिए 17) में लागू है। साद के छोटे से फिक्स ने मुझे इस विचित्रता को हटाने में मदद की।

— सिमोन रैबिट

Answer 3

IE सशर्त टिप्पणियों के अलावा, यह IE6 को IE10 को लक्षित करने के तरीके पर एक अद्यतन सूची है ।

IE से परे विशिष्ट CSS और JS हैक देखें ।

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

Comments

मैंने कोशिश की कर रहा हूँ \9और \0/के लिए displayएक वर्ग चयनकर्ता पर है, लेकिन दोनों में अच्छी तरह से IE10 पर लागू होंगे। क्या केवल IE9 [और नीचे या नहीं] के लिए आवेदन करने का कोई तरीका है?

— टॉम ब्रिटो

आप कोशिश कर सकते हैं: \0/IE9लेकिन इसका परीक्षण नहीं किया है। अन्यथा मुझे IE9 को लक्षित करने का कोई अन्य तरीका नहीं पता है जब तक कि आप सशर्त खंड का उपयोग नहीं करते हैं:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->

— ओरियल

@media screen and (min-width:0\0) {हैक रूप में अच्छी तरह IE11 द्वारा पार्स किया जा रहा है - कृपया इसकी दोबारा जांच और अपनी टिप्पणी को अद्यतन - तो यह नहीं 9 और 10 ही है।

— रॉल्फ

मैंने @media स्क्रीन और (-ms-high-विरोध: सक्रिय), (-ms-high-विरोध: कोई नहीं) {} का उपयोग किया है।

— हरसिमर

Answer 4

IE के लिए गंभीर हैक उपलब्ध हैं

स्टाइलशीट के साथ सशर्त टिप्पणियों का उपयोग करना

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

सिर अनुभाग सीएसएस के साथ सशर्त टिप्पणियों का उपयोग करना

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

HTML तत्वों के साथ सशर्त टिप्पणियों का उपयोग करना

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

मीडिया क्वेरी का उपयोग करना

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

Comments

ध्यान दें कि पिछले सूचीबद्ध ( min-width:0\0) भी IE11 पर लागू होता है

— CBarr

Answer 5

साथ ही साथ एक सशर्त टिप्पणी भी सीएसएस ब्राउज़र चयनकर्ता http://rafael.adm.br/css_browser_selector/ का उपयोग कर सकता है क्योंकि यह आपको विशिष्ट ब्राउज़रों को लक्षित करने की अनुमति देगा। फिर आप अपना CSS सेट कर सकते हैं

.ie .actual-form table {
    width: 100%
    }

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

Comments

यह IE9 में कोई प्रभाव नहीं लगता है

— FastTrack

मैं यह नहीं देखता कि क्यों नहीं, कोशिश करें। आपके सीएसएस में .actual-form table {चौड़ाई: 100%}। उम्मीद है कि आपके लिए काम करता है।

— frontendzzzguy

.ie9काम नहीं करता है क्योंकि इसे 2010 से अपडेट नहीं किया गया है।

— हैना

यह निश्चित रूप से सबसे सुरुचिपूर्ण दृष्टिकोण है। व्यक्तिगत रूप से मैं पेज को रेंडर करते समय ब्राउज़र सीएसएस सेलेक्टर्स सर्वर साइड को जोड़ना पसंद करता हूं।

— opsb

यह काम करता है यदि आप एजेंट स्ट्रिंग्स का उपयोग करते हैं और गतिशील रूप से चयनकर्ता वर्ग को शरीर में जोड़ते हैं।

— पिकपिका

Answer 6

मुझे लगता है कि सर्वोत्तम अभ्यास के लिए आपको <head>टैग के अंदर IE सशर्त विवरण लिखना चाहिए कि अंदर आपके विशेष यानी स्टाइल शीट का लिंक है। यह आपके कस्टम सीएसएस लिंक के बाद बीई करने के लिए है इसलिए यह बाद में ओवरराइड करता है, मेरे पास एक छोटी साइट है इसलिए मैं सभी पृष्ठों के लिए एक ही यानी सीएसएस का उपयोग करता हूं।

<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

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

Answer 7

इस पर थोड़ा देर से लेकिन यह पूरी तरह से मेरे लिए काम किया जब IE6 और 7 के लिए पृष्ठभूमि को छिपाने की कोशिश कर रहा था

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

मुझे यह हैक के माध्यम से मिला: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}

Answer 8

आपका स्वागत है BrowserDetect - एक भयानक समारोह।

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

Object BrowserDetect भी प्रदान करता है versionपूर्व के लिए - तो हम विशिष्ट वर्गों में जोड़ सकते हैं जानकारी। $('*').addClass('ie9');अगर (BrowserDetect.version == 9)।

शुभ लाभ....

Answer 9

यह वास्तव में IE संस्करणों पर निर्भर करता है ... मुझे यह उत्कृष्ट संसाधन मिला जो IE6-10 से अद्यतित है :

इंटरनेट एक्सप्लोरर 6 के लिए सीएसएस हैक

इसे स्टार HTML हैक कहा जाता है और इस प्रकार दिखता है:

• html .color {color: # F00;} यह हैक पूरी तरह से वैध CSS का उपयोग करता है।

इंटरनेट एक्सप्लोरर 7 के लिए सीएसएस हैक

इसे स्टार प्लस हैक कहा जाता है।

*: पहले बच्चे + html। रंग {रंग: # F00;} या एक छोटा संस्करण:

* + html .color {color: # F00;} स्टार HTML हैक की तरह, यह वैध CSS का उपयोग करता है।

इंटरनेट एक्सप्लोरर 8 के लिए सीएसएस हैक

@media \ 0screen {.color {color: # F00;}} यह हैक वैध सीएसएस का उपयोग नहीं करता है।

इंटरनेट एक्सप्लोरर 9 के लिए सीएसएस हैक

: root .color {color: # F00 \ 9;} यह हैक भी मान्य CSS का उपयोग नहीं करता है।

जोड़ा गया 2013.02.04: दुर्भाग्य से IE10 इस हैक को समझता है।

इंटरनेट एक्सप्लोरर 10 के लिए सीएसएस हैक

@मीडिया स्क्रीन और (-ms- हाई-कॉन्ट्रास्ट: एक्टिव), (-ms-हाई-कॉन्ट्रास्ट: कोई नहीं)} .color {color: # F00;}}} इस हैक्स में भी वैध CSS का उपयोग नहीं किया गया है।

Comments

आखिरी भी IE11 पर लागू होता है

— CBarr

Answer 10

/ * इंटरनेट एक्सप्लोरर 9+ (वन-लाइनर) के लिए * /

_::selection, .selector { property:value\0; }

केवल यह समाधान मेरे लिए पूरी तरह से काम करता है।

Comments

मुझे पता है कि यह एक नेक्रोकोमेन्ट है, लेकिन यह सुपर स्लिक दिखता है। हालाँकि, मुझे यकीन नहीं है कि वास्तव में यह क्या कर रहा है क्योंकि यह एक बिट आर्कैन / बीजान्टिन दिखता है। किसी को भी इस बयान के शब्दार्थ पता है? (अंत में _ :: और \ _ की तरह?)

— एडम आर। टर्नर

Chrome के लिए नियम भी लागू करता है: /

— trincot

Answer 11

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}

Answer 12

IE9 + के लिए

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE एज 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

यह एक एज और सभी IE पर काम करता है

:-ms-lang(x), .selector { color: red; }