This question already has answers here:
Target IE9 Only via CSS [duplicate]
(5 answers)
Closed 9 years ago.
How to disable specific styles only for IE9. My design needs transformations and IE9 does not support it, I need to disable them and use the jQuery transform().
Is there any prefix or something with which I can disable certain styles only in IE9?
I would advise you to use CONDITIONAL COMMENTS (http://msdn.microsoft.com/en-us/library/ms537512.ASPX).
You can create a separate CSS file for your IE9 workarounds to avoid browsers that support styles that aren't supported in IE9 from downloading your css file. thus resulting on a faster load time.
<!--[if lte IE 9]>
<link href='yourstylesheet' rel='stylesheet'/>
<![endif]-->
Related
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
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. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
i have used stylesheet main.css for firefox browser,and ie9.css for IE9 but problem is that style contained in ie9.css is not working on IE9 instead style contained in main.css is working which gives undesirable results?
It's hard to decypher what you mean without seeing your code. However to design for IE versions you can use conditional comments to specify different CSS rules for different versions of Internet Explorer:
<!--[if IE 9]>
<link href="ie9.css" rel="stylesheet">
<![endif]-->
I realize that IE is not as friendly with CSS styles on the dropdown in a form. On a page I am building here:
http://vpointproductions.com/html-code/clinique-css.html
I am trying to fix the dropdowns to be the same height in IE7 as it appears in FF, Saf, and Chrome. However, the image I am using in the CSS to make it work in those browsers is still appearing in IE 7. I am trying to include an if statement for IE 7 to fix this issue but I am having no luck. The CSS i am using is here:
http://vpointproductions.com/html-code/clinique-stylesheet.css
You could use conditional comments for targeting just IE7
<!--[if IE 7]>
//place your styles here or a link to an IE7 stylesheet
<![endif]-->
Place this in the head of your document.
More info here: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.
How many external IE Conditional Style-sheets do you use for Internet Explorer in your web projects?
See this page before to answer : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I usually have one for IE6, and one for IE7. I haven't had the need for an IE8 specific stylesheet, and having a separate stylesheet for all versions of IE isn't really practical.
<!--[if IE]>
global css for all IE's
<![endif]-->
<!--[if IE 7]>
css for specific version
<![endif]-->
yes you have two files but it's ok for me =) usually you just test global one, does this works nice in both versions, if not, then just put it in specific version css =)
btw with this script http://code.google.com/p/ie7-js/ I usually have no issues in ie7