IE8 css selector

Question

To target elements only in IE browsers i ll use  IE6     html  nav li ul       left  -39px  important      border  1px solid red      IE7     html  nav li ul        left  -39px  important      Does anyone know how to target IE8

User · Answer

9 doesn   t work with font-family  instead you   d need to use     0   important    as Chris mentioned above  for example   p   font-family  Arial  0   important

User · Answer

I have a solution that I use only when I have to  after I build my html  amp  css valid and working in most browsers  I do the occasional hack with this amazing piece of javascript from Rafael Lima  http   rafael adm br css browser selector   It keeps my CSS  amp  HTML valid and clean  I know it s not the ideal solution  using javascript to fix hacks  but as long as your code is originally as close as possible  silly IE just breaks things sometimes  then moving something a few px with javascript isn t as big of a deal as some people think   Plus for time cost reasons is a quick  amp  easy fix

User · Answer

In the light of the evolving thread  see below for a more complete answer   IE 6    html  ie6  property value     or   ie6    property value     IE 7    html  ie7  property value     or    first-child html  ie7  property value     IE 6 and 7   media screen 9        ie67  property value       or   ie67    property value     or   ie67    property value     IE 6  7 and 8   media  0screen  screen 9        ie678  property value       IE 8  html gt     body  ie8  property value     or   media  0screen        ie8  property value       IE 8 Standards Mode Only   ie8   property         value 9     IE 8 9 and 10   media screen 0        ie8910  property value       IE 9 only   media screen and  min-width 0  and  min-resolution   001dpcm         IE9 CSS   ie9 property value       IE 9 and above   media screen and  min-width 0  and  min-resolution   72dpi         IE9  CSS    ie9up property value       IE 9 and 10   media screen and  min-width 0         ie910 property value       IE 10 only    -ms-lang x    ie10   property value 9      IE 10 and above    -ms-lang x    ie10up   property value      or   media all and  -ms-high-contrast  none    -ms-high-contrast  active        ie10up property value       IE 11  and above       -ms-fullscreen   root  ie11up   property value        Javascript alternatives  Modernizr     Modernizr runs quickly on page load to detect features  it then   creates a JavaScript object with the results  and adds classes to the   html element   User agent selection  The Javascript   var b   document documentElement          b setAttribute  data-useragent    navigator userAgent           b setAttribute  data-platform   navigator platform            b className          ontouchstart  in window         onmsgesturechange  in window     touch         Adds  e g  the below to the html element   data-useragent  Mozilla 5 0  compatible  MSIE 9 0  Windows NT 6 1  Trident 5 0  SLCC2   NET CLR 2 0 50727   NET CLR 3 5 30729   NET CLR 3 0 30729  Media Center PC 6 0   NET4 0C   data-platform  Win32    Allowing very targetted CSS selectors  e g    html data-useragent   Chrome 13 0    nav      background url img radial grad png  center bottom no-repeat        Footnote  If possible  avoid browser targeting  Identify and fix any issue s  you identify  Support progressive enhancement and graceful degradation   With that in mind  this is an  ideal world  scenario not always obtainable in a production environment  as such- the above should help provide some good options     Attribution   Essential Reading   Keith Clarke Paul Irish Web Devout The Spanner

User · Answer

Building upon image72 s excellent answer  you could actually have advanced CSS selectors like this    lt  -- if lt IE 7  gt  lt body class  IE IE7down IE8down IE9down IE10down  gt  lt   endif -- gt   lt  -- if IE 7  gt  lt body class  IE IE7 IE7down IE8down IE9down IE10down IE7up  gt  lt   endif -- gt   lt  -- if IE 8  gt  lt body class  IE IE8 IE8down IE9down IE10down IE7up IE8up  gt  lt   endif -- gt   lt  -- if IE 9  gt  lt body class  IE IE9 IE9down IE10down IE7up IE8up IE9up  gt  lt   endif -- gt   lt  -- if gte IE 10  gt  lt body class  IE IE10 IE10down IE7up IE8up IE9up IE10up  gt  lt   endif -- gt   lt  -- if  IE  gt -- gt  lt body class  notIE  gt  lt  -- lt   endif -- gt    so that in your css you can do this    notIE    foo   color  blue         Target all browsers except IE     IE9up    foo   color  green        Taget IE equal or greater than 9     IE8      foo   color  orange       Taget IE 8 only     IE7down  foo   color  red          Target IE equal or less than 7      IE8  foo   IE9  foo       font-size  1 2em                Target IE8  amp  IE9 only        bar   background-color  gray       Applies to all browsers  as usual        Maybe show a message only to IE users      notIE  betterBrowser   display  none        Any browser except IE     IE     betterBrowser   display  block       All versions of IE      This is great because    It s perfectly standards compliant  no ugly dangerous css hacks  No need to have separate stylesheets You can easily target any version of IE as well as complex combinations

User · Answer

2013 update  IE10  no longer supports conditional comments   Original answer   Some people seem to be confused because this does not answer the letter of the question  only the spirit - so for clarification   There is no such thing as a browser selector  There are hacks that take advantage of bugs and or glitches in specific browsers  CSS parsers  but relying on these are setting yourself up for failure  There is a standard  accepted way to deal with this   Use conditional comments to target IE only   Example    lt  -- if gte IE 8  gt   lt style gt   your style here   lt  style gt   lt   endif -- gt    Everything inside the two  lt  -- gt  will be ignored by all non-IE browsers as a comment  and IE versions that are less than IE8 will skip it  Only IE8 and greater will process it  2013 update  IE10  will also ignore it as a comment

User · Answer

This question is ancient but    Right after the opening body tag     lt  -- if gte IE 8  gt   lt div id  IE8Body  gt   lt   endif -- gt    Right before the closing body tag     lt  -- if gte IE 8  gt   lt  div gt   lt   endif -- gt    CSS     IE8Body  nav li ul      You could do this for all IE browsers using conditional statements  OR target ALL browsers by encapsulating all content in a div with browser name   version server-side

User · Answer

There aren t any selector hacks for IE8  The best resource for this issue is http   browserhacks com  ie  If you want to target specific IE8 you should do comment in html   lt  -- if IE 8  gt  Internet Explorer 8  lt   endif -- gt    or you could use attribute hacks like      IE6  IE7  IE8  but also IE9 in some cases        diecinueve   color  blue 9        IE7  IE8     veinte   color        blue 9        IE8  IE9     anotherone   color  blue 0       must go at the END of all rules      For more info on this one check  http   www paulirish com 2009 browser-specific-css-hacks

User · Answer

In the ASP NET world  I ve tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform   So in pre-render  I would run something like this code  assuming you give your  tag an ID and make it runat the server    HtmlGenericControl  body    HtmlGenericControl this FindControl  pageBody     body Attributes Add  class   Request Browser Platform         Request Browser Browser   Request Browser MajorVersion     This code enables you to then target a specific browser in your CSS like this    IE8  nav ul li           IE7  nav ul li           MacPPC Firefox  nav ul li            We create a sub-class of System Web UI MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free   If you re not in an ASP NET environment  you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load   This method has the benefit of removing conditional comments from your markup  and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files  It also means your CSS is more future-proof  since it doesn t rely on bugs that may be fixed  and helps your CSS code make much more sense since you only have to see   IE8  container            Instead of     html  container            or worse

User · Answer

I realize this is an old question but it was the first result on Google when I searched and I think I have found a better solution than the highest ranked suggestion and what the OP chose to do    nav li ul not  stupidIE    color red     So technically this is the opposite of what the OP wanted  but that just means you have to apply the rule you want for IE8 first and then apply this for everything else  Of course you can put anything inside the    as long as it is valid css that doesn t actually select anything  IE8 chokes on this line and doesn t apply it  but previous IEs  ok I only checked IE7  I have stopped caring about IE6   just ignore the  not   and do apply the declarations  And of course every other browser  I tested Safari 5  Opera 10 5  Firefox 3 6  applies that css as you would expect   So this solution  I guess like any other pure CSS solution would assume that if the IE developers add support for the  not selector then they will also fix what ever discrepancy was causing you to target IE8

User · Answer

you can use like this  it s better than    lt link rel  stylesheet  type  text css  media  screen  href  css style css    gt   lt  -- if IE 7  gt  lt link rel  stylesheet  type  text css  media  screen  href  css ie7 css     gt  lt   endif -- gt   lt  -- if IE 6  gt  lt link rel  stylesheet  type  text css  media  screen  href  css ie6 css     gt  lt   endif -- gt  -------------------------------------------------------------   lt  -- if lt IE 7   gt   lt body class  ie6  gt   lt   endif -- gt     lt  -- if IE 7   gt   lt body class  ie7  gt   lt   endif -- gt     lt  -- if IE 8   gt   lt body class  ie8  gt   lt   endif -- gt     lt  -- if  IE  gt -- gt   lt body gt   lt  -- lt   endif -- gt    div foo   color  inherit    ie7 div foo   color   ff8000

User · Answer

OK so  it isn t css hack  but out of frustration for not being able to find ways to target ie8 from css  and due to policy of not having ie specific css files  I had to do following  which I assume someone else might find useful   if  jQuery browser version  8 0         results  css             left   23px             top   -253px

User · Answer

Take a look at these      IE8 Standards-Mode Only     test   color         blue 9       All IE versions  including IE8 Standards Mode     test   color  blue 9      Source  David Bloom   s CSS hack for IE8 Standards Mode

User · Answer

I m not going to get in a debate about whether or not this method should be used  but this will let you set specific css attributes for IE8-9 only  note  it is not a selector  so a bit different than what you asked    Use   0   after each css declaration  so    nav li ul      left  -39px 0   important      And to build off another answer  you can do this to assign variou styles to IE6  IE7  and IE8    nav li ul        left  -7px     important     IE 7  IE6 also uses this  so put it first         left  -6px     important     IE 6        left  -8px 0   important     IE 8-9        source  http   dimox net personal-css-hacks-for-ie6-ie7-ie8

User · Answer

CSS style only for IE8    divLogRight color Blue  color Red 9   color Blue     Only IE8 will be Red   first Blue  for all browsers   Red  IE6 7 8 Only  Second Blue  IE6 7 Only    So Red   for IE8 only   For a very complete summary of browser hacks  including Internet Explorer  IE   Safari  Chrome  iPhone  and Opera  visit this link  http   paulirish com 2009 browser-specific-css-hacks

[css] IE8 css selector

Examples related to css

Examples related to internet-explorer

Examples related to css-hack