Apply style ONLY on IE

Question

Here is my block of CSS    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      I only want IE 7  8  and 9 to  see  width  100   What is the simplest way to accomplish this

User · Answer

lt  -- if  IE  gt  lt body lt   endif -- gt   lt  -- if IE  gt  lt body class  ie  gt   lt   endif -- gt   body ie  actual-form table       width  100

User · Answer

There are severals hacks available for IE   Using conditional comments with stylesheet   lt  -- if IE  gt   lt link rel  stylesheet  type  text css  href  only-ie css    gt   lt   endif -- gt    Using conditional comments with head section css   lt  -- if IE  gt   lt style type  text css  gt                    css for all IE browsers                    lt  style gt   lt   endif -- gt    Using conditional comments with HTML elements   lt  -- if IE  gt   lt div class  ie-only  gt    content    lt  div gt   lt   endif -- gt    Using media query   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

User · Answer

As well as a conditional comment could also use CSS Browser Selector http   rafael adm br css browser selector  as this will allow you to target specific browsers  You can then set your CSS as    ie  actual-form table       width  100          This will also allow you to target specific browsers within your main stylesheet without the need for conditional comments

User · Answer

media screen and  -ms-high-contrast  active    -ms-high-contrast  none        myElement              Enter your style code             Explanation  It is a Microsoft-specific media query  Using -ms-high-contrast property specific to Microsoft IE  it will only be parsed in Internet Explorer 10 or greater  I have used both the valid values of the media query  so it will be parsed by IE only  whether the user has high contrast enabled or not

User · Answer

A bit late on this one but this worked perfectly for me when trying to hide the background for IE6  amp  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      I got this hack via  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

User · Answer

Welcome BrowserDetect - an awesome function    lt script gt      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           lt  script gt    lt  -- ENSURE IE STYLES ARE AVAILABLE -- gt   lt style gt      div ie             do something special for div on IE browser            h1 ie           do something special for h1 on IE browser         lt  style gt    The Object BrowserDetect also provides version info so we can add specific classes - for ex         addClass  ie9    if  BrowserDetect version    9    Good Luck

User · Answer

Here is a COMPLETE Javascript-free  CSS-based solution that allows you to target Internet Explorer 1-11  My Internet Explorer Only CSS Solution This works by hiding IE1-7 from all your modern sheets using  import  giving IE1-7 a clean  white page layout  then applies three simple CSS media query  quot hacks quot  to isolate IE8-11 in the imported sheet  It even affects IE on Mac  The advantage to this strategy is its 100  effective in targeting IE1-11  giving you complete control over how you customize CSS for those targeted browsers  while freeing you up as a designer to focus on newer CSS3 and cutting-edge styles and layouts in Edge and all other modern browsers going forward  I have been using a version of this since 2004 but recently updated it for 2021  HOW IT WORKS First create two CSS style sheet links  The first is a basic element style sheet that gives all browsers  old and new  a simple white  block-level layout  Linked CSS has wide support in older CSS1 browsers going back to 1995  A wide range of old browsers will see this first sheet and display your content and layouts in a clean  white block-level content page  I like to put  quot reset quot  element-only styles in here  The second sheet is an import sheet that will load all your advanced CSS styles using a single  import rule that hides styles to a wide range of browsers including IE1-7   lt link media  quot screen quot  rel  quot stylesheet quot  type  quot text css quot  href  quot OldBrowsers css quot    gt   lt link media  quot screen quot  rel  quot stylesheet quot  type  quot text css quot  href  quot Import css quot    gt   Next  in your  quot Import css quot  sheet add this  import rule exactly as formatted  Its hidden from IE1-7 and a wide range of older browsers listed below    import  ModernBrowsers css  all   All CSS in this imported sheet will be hidden from IE1-7 and a wide range of older browsers  IE 1-7 doesn t understand  quot media type quot  value  quot all quot  so will fail to import this sheet  This specific version of import is also not recognized by many older browsers  pre-2001   Those browsers are so old now  you just need to deliver them a white web page with stacked blocks of content  Use  quot OldBrowsers quot  to do so  Next  in  quot ModernBrowsers css quot  you want to target IE8-11 using CSS media query  quot hacks quot  alongside all your normal selectors and classes  Simply apply the following media query  IE-only fixes to your modern  imported style sheet to target these specific IE browsers  Drop into these blocks any styles specific to them  You can attack your layout or other style issues in IE now in media query  quot batches quot  now rather than by multiple selector  quot hacks quot      IE8     media  0screen       body           background  red  important              IE9     media all and  monochrome 0        body           background  blue 9  important              IE10-11     media all and  -ms-high-contrast  none    -ms-high-contrast  active        body           background  green  important           Simple  You have now targeted styles for IE1-11  all Internet Explorer browsers   With this solution you achieve the following   The  import excludes IE 1-7 from your modern styles  completely  Those agents  along with the list below  will never see your modern imported styles and get a clean white style sheet content page older browsers can still use as far as viewing your content  use  quot OldBrowsers css quot  to style them   The following browsers are excluded from  quot ModernBrowsers css quot  using the above  import rule   Windows Internet Explorer 1-7 x Macintosh Internet Explorer 1-5 x Netscape 1-4 8 Opera 1-3 5 Konqueror 1-2 1 Windows Amaya 1-5 1 iCab 1-2 OmniWeb   In your  quot ModernBrowsers quot  imported sheet  you can now safely target IE browsers version 8-11 using simple media query  quot hacks quot    This system uses a simple  import style sheet system that is fast and manageable using traditional  non-support for external style rules rather than CSS fixes sprinkled throughout multiple sheets   BTW   Do not listen to anyone saying  import is slow  as it is not  My import sheet has ONE LINE and is maybe a kilobyte or less in size   import has been used since the birth of the WWW and is no different than a simple CSS link  Compare this to the Megabytes of Javascript kids today are shoving into browsers using these new  quot modern quot  ECMAScript SPA API s just to display a tiny paragraph of news    All old IE browsers and a wide range of other user agnets are excluded from modern styles now using this import strategy  which allows these agents to collapse back to plain   quot block-level quot   white pages and stacked content layouts that are fully accessible by older browsers   Notice this solution has no IE conditional comments   you should NEVER use those   With this solution  web designs are now 100  free to use custom  cutting edge CSS3 technologies without having to ever worry about older browsers and IE1-11 ever again    I will be posting my formal version of this Universal CSS System on GitHub soon  So stay tuned    This is part of the new  quot progressive quot  CSS  100  Javacript-free  design concept in 2021 for addressing cross-browser style issues  where older agents are allowed to degrade gracefully to simpler layouts rather than struggling to fix problems in cryptic old  broken  box-model agents  IE6  that don t need custom layouts any longer today as the long tail of their slow demise continues online  And its my hope we stop creating these gigantic  CPU-hog  Javascripted  polyfill nightmare solutions for addressing what used to be years ago solved by simple CSS solutions like this one

User · Answer

Apart from the IE conditional comments  this is an updated list on how to target IE6 to IE10   See specific CSS  amp  JS hacks beyond IE          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 gt     body  cuatro   color  red       Everything but IE6-8     root   gt   quince   color  red        IE7      html  dieciocho    color  red       IE 10      media screen and  -ms-high-contrast  active    -ms-high-contrast  none        veintiun   color  red

User · Answer

I think for best practice you should write IE conditional statement inside the  lt head gt  tag that inside has a link to your special ie style sheet  This HAS TO BE after your custom css link so it overrides the latter  I have a small site so i use the same ie css for all pages     lt link rel  stylesheet  type  text css  href  index css    gt   lt  -- if IE  gt       lt link rel  stylesheet  type  text css  href  all-ie-only css    gt   lt   endif -- gt    this differs from james answer as i think personal opinion because i work with a designer team and i dont want them to touch my html files and mess up something there  you should never include styles in your html file

User · Answer

Update 2017   Depending on the environment  conditional comments have been officially deprecated and removed in IE10      Original  The simplest way is probably to use an Internet Explorer conditional comment in your HTML    lt  -- if IE  gt   lt style gt       actual-form table            width  100          lt  style gt   lt   endif -- gt    There are numerous hacks  e g  the underscore hack  you can use that will allow you to target only IE within your stylesheet  but it gets very messy if you want to target all versions of IE on all platforms

User · Answer

For    Internet Explorer 9   one-liner         selection   selector   property value 0      Only this solution perfectly work for me

User · Answer

It really depends on the IE versions     I found this excellent resource that is up to date from IE6-10      CSS hack for Internet Explorer 6      It is called the Star HTML Hack and looks as follows          html  color  color   F00     This hack uses fully valid CSS          CSS hack for Internet Explorer 7      It is called the Star Plus Hack         first-child html  color  color   F00     Or a shorter version         html  color  color   F00     Like the star HTML hack  this uses valid CSS       CSS hack for Internet Explorer 8       media  0screen        color  color   F00         This hacks does not use valid CSS       CSS hack for Internet Explorer 9       root  color  color   F00 9     This hacks also does not use valid CSS       Added 2013 02 04  Unfortunately IE10 understands this hack       CSS hack for Internet Explorer 10       media screen and  -ms-high-contrast  active    -ms-high-contrast  none         color  color   F00         This hacks also does not use valid CSS

User · Answer

For IE9     media screen and  min-width 0 0  and  min-resolution   72dpi          IE9  CSS     selector        color  red              IE Edge 12     supports  -ms-ime-align  auto       selector       color  red             This one works on Edge and all IEs    -ms-lang x    selector   color  red

[css] Apply style ONLY on IE

Examples related to css

Examples related to internet-explorer