How to configure IE7 and IE8 to valid CSS?

Question

How to configure IE7 and IE8 to valid CSS?

I want to configure IE7 and IE8 to W3C-compatible CSS. Sometimes CSS fixes for one version are not fixed for another. How can I achieve this?

+64

css internet-explorer internet-explorer-8 web-standards

Wasim Shaikh May 02 '09 at 5:38 a.m. 2009-02-02

source share

7 answers

I would recommend looking at conditional comments and making a separate sheet for IE that you come across.

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

+21

scragar May 2 '09 at 5:45 a.m.

source share

The answer to your question

A completely acceptable way to select all browsers, but IE8 and below uses the class pseudo-class :not() . Since versions of IE 8 and below do not support :not() , selectors containing it are ignored. This means you can do something like this:

 p {color:red;} p:not([ie8min]) {color:blue;}

This is still fully CSS valid, but it forces IE8 and below to display different styles (as well as Opera <9.5 and Safari <3.2).

Other tricks

Here is a list of all completely valid CSS browser-specific selectors that I could find, with the exception of some that seem pretty redundant, such as those that select only one type of ancient browser ( 1 , 2 ):

 /****** First the hacks that target certain specific browsers ******/ * html p {color:red;} /* IE 6- */ *+html p {color:red;} /* IE 7 only */ @media screen and (-webkit-min-device-pixel-ratio:0) { p {color:red;} } /* Chrome, Safari 3+ */ p, body:-moz-any-link {color:red;} /* Firefox 1+ */ :-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */ :-moz-any(html) p {color:red;} /* Firefox 4+ */ /****** And then the hacks that target all but certain browsers ******/ html> body p {color:green;} /* not: IE<7 */ head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */ html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */ html>/**/body p {color:green;} /* not: IE<8 */ body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */ :root p {color:green;} /* not: IE<9, Opera<9.5 */ body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

Loans and sources:

+9

Joeytje50 Jan 07 '14 at 9:27

source share

For a more complete list as of 2015:

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 standard 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 higher

 @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 higher ..)

 _:-ms-fullscreen, :root .ie11up { property:value; }

JavaScript alternatives

Modernizr

Modernizr quickly launches page loading 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 (for example) the below 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'

Providing target CSS selectors, for example:

 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 correct any problems that you identify. Support progressive improvement and graceful degradation . With this in mind, this is a “perfect world” scenario that is not always available in the production environment as such - this should help provide some good options.

Attribution / Essential Reading

+7

SW4 Jan 06 '15 at 12:29

source share

Well, you really don’t have to worry about IE7 code not working in IE8 because IE8 has compatibility mode (it can display pages just like IE7). But if you still want to target different versions of IE, now you can use conditional comments or start your css rule with * on the target IE7 and below . Or you can pay attention to the user agent on the servers and lay out another CSS file based on this information.

+4

Bjorn Tipling May 02 '09 at 5:44 a.m. 2009-02-02

source share

The real problem is not IE8, but the hacks you use for earlier versions of IE.

IE8 is pretty close to standards, so you don't need any hacks for it, maybe just some settings. The problem is that you are using some hacks for IE6 and IE7; you will need to make sure that they apply only to these versions and not to IE8.

I made our company website compatible with IE8 some time ago. The only thing I actually changed was to add a meta tag that tells IE that the pages are compatible with IE8 ...

+4

Guffa May 2 '09 at 6:17

source share

I did this using Javascript. I add three CSS classes to the html element:

 ie<version> lte-ie<version> lt-ie<version + 1>

So, for IE7, it adds ie7 , lte-ie7 ..., lt-ie8 ...

Here is the javascript code:

 (function () { function getIEVersion() { var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/'); if (msie > 0) { // IE 10 or older => return version number return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); } else if (trident > 0) { // IE 11 (or newer) => return version number var rv = ua.indexOf('rv:'); return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); } else { return NaN; } }; var ieVersion = getIEVersion(); if (!isNaN(ieVersion)) { // if it is IE var minVersion = 6; var maxVersion = 13; // adjust this appropriately if (ieVersion >= minVersion && ieVersion <= maxVersion) { var htmlElem = document.getElementsByTagName('html').item(0); var addHtmlClass = function (className) { // define function to add class to 'html' element htmlElem.className += ' ' + className; }; addHtmlClass('ie' + ieVersion); // add current version addHtmlClass('lte-ie' + ieVersion); if (ieVersion < maxVersion) { for (var i = ieVersion + 1; i <= maxVersion; ++i) { addHtmlClass('lte-ie' + i); addHtmlClass('lt-ie' + i); } } } } })();

Subsequently, you use the .ie<version> css class in your stylesheet, as described by potench.

(The Mario detectIE function is used in Check if user is using IE with jQuery )

The advantage of using lte-ie8 and lt-ie8 etc. is that you can target the entire browser that is less than or equal to IE9, i.e. IE7 - IE9.

+1

Tahir Hassan Apr 02 '14 at 15:33

source share

potench · Accepted Answer · 2010-12-03 19:45

Explicitly set IE versions without hacks using HTML and CSS

Use this approach if you don't need CSS hacks. Add a browser-unique class to the <html> element so that you can subsequently select it based on the browser.

Example

 <!doctype html> <!--[if IE]><![endif]--> <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--> <head></head> <body></body> </html>

Then in your CSS you can very strictly refer to your target browser.

Example

 .ie6 body { border:1px solid red; } .ie7 body { border:1px solid blue; }

For more information check out http://html5boilerplate.com/

Target IE versions with CSS "Hacks"

Moreover, here are the hacks that let you customize IE versions.

Use "\ 9" to configure IE8 and below.
Use "*" to target IE7 and below.
Use "_" to configure IE6.

Example:

 body { border:1px solid red; /* standard */ border:1px solid blue\9; /* IE8 and below */ *border:1px solid orange; /* IE7 and below */ _border:1px solid blue; /* IE6 */ }

Update: target IE10

IE10 does not recognize conditional statements, so you can use this to apply the "ie10" class to the <html> element

 <!doctype html> <html lang="en"> <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]--> <head></head> <body></body> </html>

How to configure IE7 and IE8 to valid CSS?

The answer to your question

Other tricks

Loans and sources:

IE 6

IE 7

IE 6 and 7

IE 6, 7 and 8

IE 8

IE 8 standard mode only

IE 8.9 and 10

IE 9 only

IE 9 and higher

IE 9 and 10

IE 10 only

IE 10 and above

IE 11 (and higher ..)

JavaScript alternatives

Modernizr

User Agent Selection

Footnote

Attribution / Essential Reading

More articles: