I have the following:
<!--[if IE]>
<style>
iframe {
margin-top: 0 !important;
display: none;
}
.c-position {
margin-top: 20px !important;
}
br {
display: none;
}
</style>
<![endif]-->
But when I see my site in IE10 The CSS within the IE conditional statements are not being applied (e.g. the iframe should disappear).
I even tied this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
So IE10 recognizes the conditional statements.
Why am I doing wrong?
Perhaps you can try some jQuery for ie10 like this:
if ($.browser.msie && $.browser.version == 10) {
$("html").addClass("ie10");
}
But surely it is not replacement for conditional comments!
IE10 does not support conditional comments.
Source quote:
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers.
I hope you could help me with maybe simple problem with HTML5 in IE9
In my code I have few things:
<input type="text" id="fn" name="fn" placeholder="Street" autofocus/>
---------------------------------------------------------------------
/* INPUT TEXT */
input[type="text"]
{
border:2px solid #dadada;
border-radius:7px;
font-size:16px;
padding:5px;
}
input[type="text"]:focus
{
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
In Opera, Chrome and Firefox all is good, but in IE9 nothing...
I tried to include in head before linking CSS file this lines:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Do you have any ideas how to fix this?
This CSS does not work in IE9 (in IE9 are normal input), in Opera, Chrome, Firefox are nice radius and colors inputs.
The only issue I see different between IE9 and Opera/Chrome/Firefox is that it doesn't support the placeholder HTML5 attribute. You can view this jsFiddle to verify the broken behavior in IE9 http://jsfiddle.net/dndrS/ and also reference CanIUse to see the support of input placeholder attribute.
IE10 does support the placeholder attribute, so you can either upgrade or if you'd like to support IE9 then you can use the following polyfill https://github.com/mathiasbynens/jquery-placeholder by Mathias Bynens. Here is a jsFiddle using the polyfill http://jsfiddle.net/nyTMw/ that works in IE9
A handy website to look for other polyfills is http://html5please.com/
I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
/* this one apply in ie only */
}
I would recommend using an entirely separate IE-specific stylesheet, to isolate all of the nasty IE hacks you use. Then, in your HTML, you can use a conditional comment to load that stylesheet for IE only.
HTML
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie-hacks.css">
<![endif]-->
</head>
<body>
<!-- ... --->
</body>
</html>
ie-hacks.css
.sample{
border:1px solid #fff;
}
Use a conditional comment in the head of your HTML document.
<!--[if IE 6]>
.sample {border:1px solid #fff;}
<![endif]-->
check out "conditional CSS comments"
http://www.quirksmode.org/css/condcom.html
You can add !ie after the style declaration, e.g. .sample {border:1px solid #fff !ie;}. This works on IE 6 and 7, but doesn't work in 8, unless you trick it into IE7 compatibility mode using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > (just make sure this appears before the CSS).
The cleanest solution though, is to include am IE-specific CSS file.
If you need to make more changes, and to keep your pages clean, I would recommend using a separate stylesheet for IE.
<!--[if IE]>
//place link to IE stylesheet here.
<![endif]-->
Then make the change inside of the IE stylesheet.
you can simply do the following give some charcter like # or so before it. Firefox ,chrome and other browsers ignore that line but IE executes that.
Give that line at the end of your css so that it will take care. Most of the developers use this hack for margin, padding issues in IE browser
.sample{
height:15px;
width:15px;
margin:10px;
padding:10px;
float:left:
/* this one apply in ie only */
border:1px solid #fff;
# border:2px solid #fff;
/* this one apply in ie only */ for ie it treats as 2px.
}
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
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?
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/
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:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Everything inside the two <!--> 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.
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)
you can use like this.
it's better than
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo { color: inherit;}
.ie7 div.foo { color: #ff8000; }
This question is ancient but..
Right after the opening body tag..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Right before the closing body tag..
<!--[if gte IE 8]>
</div>
<![endif]-->
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
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/
Building upon image72's excellent answer, you could actually have advanced CSS selectors like this:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
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 & 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
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!
I have a solution that I use only when I have to, after I build my html & 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 & 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 & easy fix.
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>/**/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
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.
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'
});
}
\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; }
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
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
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/