In light of the changing landscape, I have made updates to the following:

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>/**/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\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 and above

@media screen and (min-width:0\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;}
}

The utilization of -ms-high-contrast ensures that MS Edge is not targeted, as Edge does not support -ms-high-contrast.

IE 11

_:-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

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 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, identify and fix any issue(s) without hacks. Support progressive enhancement and graceful degradation. However, this is an 'ideal world' scenario not always obtainable, as such- the above should help provide some good options.

---

Attribution / Essential Reading

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• The Spanner

If you want to specifically target IE10 and IE11 (excluding Edge), follow these steps:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* Place your specific CSS styles for IE10 and IE11 here */   
}

Here is a solution that appears to be effective:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* Styles specific to IE10+ can be placed here */  
}

Link to the reference for more information

Here is a technique for distinguishing between <=IE11 and >IE11 ("Edge") starting from the year 2017:

@supports not (old: ie) { /* include code here for browsers that are not old versions of Internet Explorer */ }

For further clarification, consider this example:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

This method is effective because IE11 does not support @supports, whereas all other relevant browser and version combinations do, as highlighted in this resource.

If you want to ensure compatibility with IE11, you can write your code as usual and then utilize the @supports feature to check for properties not supported in IE11, such as grid-area: auto.

You can then create styles specifically for modern browsers within this block. Since Internet Explorer does not support the @supports rule, it will display the original styles, while modern browsers that do support @supports will override these styles.

.my-class {
// In IE, the background color will be red
background: red;

   // In modern browsers, the background color will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}

Success! It did the trick

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

Following that, in the stylesheet, targeted items are identified by

body.ie11 #some-other-div

Is it time for this web browser to retire?

Give this a shot:

/*------Unique style for Internet Explorer 11---------*/
 _:-ms-fullscreen, :root 
 .my-special-class 
{ 
  font-size: 1.3em;
  position: absolute;
  top: -2em;   
}

Discover more about CSS with this informative article: Exploring CSS User Agent Selectors

Essentially, by implementing the following script:

var element = document.documentElement;
element.setAttribute('data-useragent', navigator.userAgent);
element.setAttribute('data-platform', navigator.platform );
element.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

You can now utilize CSS to target specific browsers and versions.

For Internet Explorer 11, you could apply the following styling:

Check out this FIDDLE for an example

html[data-useragent*='rv:11.0']
{
    color: green;
}

Utilize the attributes listed below:

• !!window.MSInputMethodContext
• !!document.msFullscreenEnabled

To apply a specific class to the body tag, it is recommended to utilize Modernizr.

Additionally:

function findIEVersion()
{
  var version = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var userAgent = navigator.userAgent;
    var regex = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (regex.exec(userAgent) != null)
      version = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var userAgent = navigator.userAgent;
    var regex = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (regex.exec(userAgent) != null)
      version = parseFloat( RegExp.$1 );
  }
  return version;
}

Please be aware that IE11 is currently in preview, and there may be changes to the user agent string before final release.

The User-agent string for IE 11 at present is as follows:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

Thus, for versions 11.xx, you can test with the following code snippet:

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

If you're looking for a reliable solution, consider using Layout Engine v0.7.0. This tool utilizes browser feature detection to identify not just IE11 and IE10, but also older versions like IE9, IE8, and IE7. Additionally, it can recognize various other popular browsers, including those used on mobile devices. By adding a class to the html tag, Layout Engine is user-friendly and has shown strong performance in extensive testing.

If you are utilizing Modernizr, distinguishing between IE10 and IE11 is a breeze.

One key difference is that IE10 does not support the pointer-events property, while IE11 does. (caniuse)

To cater to these variations, you can use specific CSS based on the class added by Modernizr:

.class
{ 
   /* Styling for IE11 goes here */
}

.no-pointerevents .class
{ 
   /* Styles for handling IE10 go here */
}

To maintain the standard of conditional comments in HTML, you can utilize JavaScript to add a specific class. Here is an example code snippet:

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

Another option is to use a library such as Bowser:

https://github.com/ded/bowser

You can also consider using Modernizr for feature detection:

Identifying Internet Explorer (IE) and its various versions can be done quite easily, thanks to its distinctive features:

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // from IE8 onwards
    browser = 'IE';
    ieVersion = document.documentMode;
}

.

This method also captures higher IE versions running in Compatibility Mode/View. Then, it's just a matter of applying conditional classes:

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';

Here is a possible solution:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}

Encountered a similar issue while working with a Gravity Form on a WordPress site in Internet Explorer 11. The column layout of the form, set to "display: inline-grid", caused a disruption in the design. However, by implementing the suggestions mentioned above, I was able to successfully address the layout inconsistency!

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}

Instead of focusing on detecting "internet explorer," perhaps it would be more beneficial to consider what features your website needs to function properly. If a browser supports those features, then it should be deemed suitable. If not, it may be best to alert the user.

For further assistance, I recommend visiting instead of proceeding with your current approach.