Menu
Simply add the following IE-only fixes to your modern style sheet to target these last specific IE browsers. Drop into these blocks any styles specific to these old IE browsers. Simple! You have now targeted styles for IE1-11 (all Internet Explorer browsers!)
#2 CSS Rules Specific to Explorer (IE CSS hacks) However, this method is not recommended because they are not valid CSS syntax. IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property.
Select the tools icon in the top-right corner of the Internet Explorer browser window. Select Internet options from the menu. In the Internet Options window, select the Accessibility button in the bottom-right corner. In the Accessibility window, select the checkbox labelled Format document using my style sheet.
@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.
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:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
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.
Apart from the IE conditional comments, this is an updated list on how to target IE6 to IE10.
See specific CSS & 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>/**/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; }
}
There are severals hacks available for IE
Using conditional comments with stylesheet
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
Using conditional comments with head section css
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
Using conditional comments with HTML elements
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
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; }
}
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.
I think for best practice you should write IE conditional statement inside the <head> 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.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With