If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.
Why use conditional stylesheets?
- You got problems, they need fixin’
- Keeps your code hack-free and valid
- Keeps your main stylesheet clean
- Perfectly acceptable technique, sanctioned by Microsoft
And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.
The Code
This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”.gtmeans “greater than”,gtemeans “greater than or equal”,ltmeans “less than”,ltemeans “less than or equal.”
Note that IE 10 and up DO NOT support conditional comments at all.
Target ALL VERSIONS of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->Target everything EXCEPT IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->Target IE 7 ONLY
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->Target IE 6 ONLY
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->Target IE 5 ONLY
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->Target IE 5.5 ONLY
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->Target IE 6 and LOWER
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]--><!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->Target IE 7 and LOWER
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]--><!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->Target IE 8 and LOWER
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]--><!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->Target IE 6 and HIGHER
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]--><!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->Target IE 7 and HIGHER
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]--><!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->Target IE 8 and HIGHER
<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]--><!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->Target IE 10
Universal IE 6 CSS
Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to serve IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.
<!--[if !IE 6]><!-->
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->Hacks
If you must…
IE-6 ONLY
* html #div {
height: 300px;
}IE-7 ONLY
*+html #div {
height: 300px;
}IE-8 ONLY
#div {
height: 300px\0/;
}IE-7 & IE-8
#div {
height: 300px\9;
}NON IE-7 ONLY
#div {
_height: 300px;
}Hide from IE 6 and LOWER
#div {
height/**/: 300px;
}html > body #div {
height: 300px;
}Argument against conditional stylesheets
We shouldn’t need them. They are against the spirit of web standards.
Argument for conditional stylesheets
Yeah, but we do need them.
While I agree that using hacks for IE is a dirty method, I would personally not agree that using the IE 6 and IE 7 selectors (*html, * etc) as I think they are useful and help you get your design closer to pixel perfect.
In regards to the min-height/ min width issue I personally use a hack (read about it hear) as it makes my life easier…
Pretty much the only other hack I will use would be for pngs for ie6 (also read how I used it hear)
Your links didn’t seem to work dude, but i’m guessing you mean the expression used for min-width/height in ie6 which i do personally use, along with the ‘background:none;filter:progID:DXImageTransform’….etc. stylesheet fix for png’s – which i also use, i can’t see a tidier way to do both of these and i do believe they are both fine to use also.
btw I would be interested in your tips on how to get around these problems without the hacks I mentioned above…
What a great post. I already knew the technique and I even use it, but it’s well explained ! Grreat job !
Nice work Chris, keep ’em coming.
Hey Chris.. Find this article really useful.. Well done!
Hey thanks this is just what I needed! God I hate IE!
You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris and i Love Portland O.
very useful post, thank you for instructing people on the best practices for css.
the underscore hack like [ _height: 300px; ] works with non IE-7. but one problem: [ _height: –300px; ] doesnt work
* html #div {
height: 300px;
}
For IE7 only?
Never used it – I go for
*:first-child+html "selector here" {
height: 300px;
}
And this is what I'd use for IE6
* html "selector here" {
height: 300px;
}
Thanks for the post. I’m going mad with IE8! Is there a way to create a separate sheet with only the hacks, which would be opened and overwrite normal CSS if IE? Not having much luck :(
Thank you for the conditionals! Helped me out of a bind.
(It might just be me, but you might want to check this page in IE6. Each person’s tiny-image is covering up their name and part of their text.)
Damn, another hacking IE post :) Well, these hacks do work sometimes, so thanks for listing them Chris! Cheers!
~ K.
I prefer including conditional stylesheet content inside a global.css file – this means that you’re reducing header requests (ok, one isn’t the end of the world, but I’m a little OCD) and you don’t spend ages switching between stylesheets when developing (uses “non-IE” conditional)
Then simply reference those IDs from within your global.css
Using “!important” or stacking parent IDs/classes, you can easily override styles and keep your fixes in one place.
Note: credit where credit’s due; I didn’t come up with this technique but I can’t remember who did so if anyone knows then please do respond!
I like this. You could probably also generate the ID with PHP to clean up the HTML even more.
Correct me if I’m wrong, but I thought IE had some “issues” with !important
None that I’ve ever come across. IE6 has issues with inheritance but using multiple selectors (parent elements) should work – an ID usually works!
There are definitely ways to improve this – using php would work great!
Chris, in your example in this comment, you use the “if not IE” syntax correctly
<!--[if !IE]><!-->*content*
<!--<![endif]-->
However, in the article, you have it as
<!--[if IE 6]>*content*
<![endif]-->
What you have in the article doesn’t actually work; Browsers see it as just a comment. Anything inside doesn’t appear in ANY browser. You should probably correct the article to reflect this, so that people don’t get confused.
Thanks for the article, though! It’s nice to have all of these variations collected in one place.
<!--[if IE]><link rel='stylesheet' type='text/css' href='ie.css' />
<![endif]-->
works for me in ie7
Nice post … really beneficial
Danke fürs Teilen
but i have a query …….Is there any CSS property to make font smooth in IE?
waiting for reply
Why is it that lately anything with the Microsoft brand name is failing to meet the standard. Zero day exploits, critical patch Tuesdays, IE hacks. It is hard to image that a company with deficient products is still in business.
I guess it goes to show the lack of innovation and ingenuity of Redmond.
Come on now. We don’t need to rip on Microsoft. Have you seen IE 8? It doesn’t do so bad at rendering pages and it’s a heck-of-a-lot more secure than previous versions. As for critical patch Tuesdays — let’s just say there are people working against you when you have 85% of the market. Don’t worry, there will be viruses you have to watch out for on your Mac soon enough. I’ll admit, I primarily use my macbook, but I love my PC too.
What? Are you joking? IE8 is only even semi-passable when compared to older versions of IE. It’s like a broken down car, but now at least it has wheels so you can tow it. It is still a broken down car that needs to be towed. IE8 barely squeeks by supporting a bare minimum of todays standards. It is still making our lives difficult though with no support for basic stuff like psuedo-selectors and when you look toward more advanced stuff there is no support on any horizon from the IE front. In a few years I will be shocked if IE8 is not the bane of web development, and the primary thing holding us back. It barely scrapes by today, in a few years it will be a nightmare just like IE6 is now.
Really, MSs whole strategy with IE is just horrid, always has been, and hasn’t changed. Years between updates? I guess that is so that there is time for a million sites to be built which depend on IEs shortcomings to work properly. IE8 represents no change from their terribly lacking modus operandi.
I think the fact that Microsoft remains a successful business is a clear statement about what is wrong with our economy. Even MS Office has become a convoluted mess of applications now. I used to feel like at least Office was a solid product, but I switched to Open Office last year and have been perfectly happy with it.
How many new OS versions has MS put out in the past 10 years? Yet XP is still the standard and XP sucks, just not quite as badly as everything else MS has put out over the past decade.
I mean who else intentionally builds in support for hundreds of bugs because they waited so long to fix the bugs that if they now don’t support these ‘legacy’ bugs the “internet will break”?? As if the internet wouldn’t get along perfectly fine without any help at all from MS..
While I do understand the software development cycle and knowing that with each version there are going to be many problems solved. I am merely stating that with the current market share and amount of time Internet Explorer has spent in that market, that a better product would surly have emerged.
And no I will not be watching out for viruses on my SE version of Linux!
last example Universal IE 6 CSS is
anstelle von
Hacks FTW.
They don’t take up much space and I hate having to deal with multiple stylesheets. They’re also an extra request. Using hacks within your main stylesheet also allows you to skip conditional comments.
My concern is primarily, what if IE 9 comes out and the hacks that were supposed to be targeting IE 6 or 7 specifically now all the sudden fuck stuff up in IE 9. That would suck. That will never happen with conditional comments.
I’m agree with you, but the evolution of IE is progressive no retrospective, so when I see the new features of IE9, I found them very interesting, standars, SVG, etc. I think in the same way to David Walsh.
I see your point, but I think the “emulation” meta tag should be used to prevent that problem.
I know this is a 4 year old comment and so I don’t know if you will see my reply, but have you seen this hack? http://www.limecanvas.com/css-hacks-targeting-ie-10/
I’d be interested to know what you think, since it’s sort of the best of both worlds.
As always, nice article Chris. Regarding Government dropping support for IE6, we did that a year ago and many others are following suit.
sollte sein
Well, I agree that using conditional comments is a good (maybe the best) way to avoid (or deal with) some IE6 (and sometimes IE7) limitations or specificities.
But I’m not sure that using the “Target everything EXCEPT IE” is a good idea.
I strongly suggest to use a regular stylesheet that every browser (including IE) will use and add some IE specifics stylesheets that will overload some of the CSS selector and properties that could trouble IE in the regular stylesheet.
I think that using the cascade is far more safe than maintaining 2 specifics steelsheets.
Yup, put the c back in css please!
great will be the party when IE6 will finally die..
Here is a nice "grave"
IE 6 already dead
Example only ie8:]
#add{height/*\**/:25px;}
Hasn’t it becoming obvious that folks that use IE really don’t give a flip about how the web looks? Serve them Helvetica (it’s too good for them) and Times. Save your hard work for those that appreciate it; the ones who are browsing the web with a modern browser. Serve your CSS 3 and stop using javascript to make it nice for IE6-7.
Stop supporting IE. Even MS is saying that now. http://www.abc.net.au/news/stories/2010/01/19/2795684.htm
Everyone should ask their mother (and grandmother) what browser version they are using. After explaining to them what a browser is, you will probably not be surprised that they don’t know what version they are using. And less surprised that they don’t know how to upgrade. It’s not that they don’t care; they just don’t know how.
I’m not advocating an additional full-blown design just to support an antique browser but have a heart. It’s not much work to add a one-line conditional statement to give them a tiny bit of support.
The web isn’t just for the tech-savvy.
Am I the only one who noticed that CSS Tricks isn’t styled in IE6?
There are no visual elements to the site at all. I find it bizarre you would make a posting about styling for IE6, when, in a way, you don’t bother.
Is there a certain reason for this Chris?
It does have SOME styling. I use the Universal IE 6 CSS (see above).
Lol that’s actually kind of funny :P
No, he does bother. If he didn’t bother you would just the regular styles in whatever way IE 6 decided to render them. Instead you see a semi-bare, more readable version than you otherwise would.
I can’t say that i have ever used fixes or separate stylesheets when designing, most of my designs I create so that even if IE6 does display something slightly different it still looks “normal”. I probably spend more time than the average person on my stylesheets but its well worth the effort so that you only need one stylesheet and no fixes.
And considering the usage of IE6 is dropping each year Im not 100% put off if something is quite the same in the rest of the browsers.
Another big fan of “hacks” opposed to maintaining multiple stylesheets.
Use a proper/valid doctype.
Use a CSS reset.
p {
color:blue; good browsers
*color:red; ie 7 and below
_color:green; ie6 and below (to override any ie7 specific style)
}
Just document the * and _ at the top of your stylesheet for anyone who may not know what they mean. It then becomes crystal clear in your code what each hack does.
These are the hacks I use as well, they are my preferred method. It is so much easier to see them with the rest of the normal styles.
In addition, for IE8 I use this
p {
color: black\9;
}
This is my standard thing for IE6
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="/css/IE6.css" media="screen" />
<meta http-equiv="imagetoolbar" content="false" />
<![endif]-->
Chris,
For Additional Resources you should include this website, It is all about IE6 bugs: http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
That link leads to a PDF/Exploit.Gen Trojan.
There are less and less users of IE6 and IE7/8 renders just about the same as Firefox. Hopefully, in the not so distant future, everyone will be using compliant browsers and we wouldn’t have to make separate stylesheets for these browsers.
Ok, so I’m just getting into using conditional statements as we’ve had a few layouts recently we just couldn’t get to work universally.
I’m kind of curious about how you are formulating your stylesheets then. Are you essentially just say, make 3 copies of your .css file for IE6, 7+ and FF, and each copy is the complete stylesheet but accommodates the elements?
Or do you only have the page elements (pagewrap, container, content, etc) in this conditional .css? And then you have another .css that contains all the stuff like forms, p, h1, etc?
Or do you just have to put fixes to the 1 or 2 divs in your conditional .css file, and IE will override that one div?
You should list your MAIN stylesheet first, then the conditional stylesheets AFTER. That way the conditionals you just OVERRIDE whatever little things need tweaking.
Great thanks! That’s WAY better than what we did – which was just duplicate the same stylesheet and messed with a couple of the elements. Really cluttered compared to what we could have done.
I don’t like hacks, a separate stylesheet may be an extra request but it will usually be a very small file and it makes things much easier to maintain.
Having said that I had an interesting scenario a while back where I needed a conditional comment to target all browsers (including non-IE!) except IE6 because an embedded .swf that my client insisted upon would cause it to crash. Stu Nicholls came to the rescue with a bizarre range of what I am guessing are hacks that do just this
http://www.cssplay.co.uk/menu/conditional.html
This allowed me to embed the .swf for all browsers, except IE6, which just got a static image.
Don’t see why this should have been any problem. I also don’t see why you would want to invert your wording “all browsers except IE6” when really you only needed to target IE6.
Maybe it was your oddly inverted wording which caused your trouble in the first place (because you were looking at it wrong). All you needed was a single conditional stylesheet for IE6 with something like .display:none; in it. because then whatever was nested in the thing which get’s .display:none; won’t even DL at all (unlike with .visibility:hidden; where the content is still there, but invisible).
IF for some reason that wouldn’t work then you could have still just used conditional comments in the HTML to add in some comment tags before and after your SWF. So that in IE6 only the SWF gets commented out. Not sure if that would work because conditionals may or may not be able to contain comments, but there are other methods too.
Like useing a single IE6 conditional comment to add a few characters to the filename of the SWF, thereby pointing IE6 at a different file that doesn’t cause it to crash.
There are 100 other ways to address this sort of issue by targeting only IE6. So saying you really needed to target everything BUT IE6 is bass ackwards and serves only to confuse the issue. You needed to target IE6, nothing special about it.
Yeah, maybe you’re right. I guess I just got carried away with the excitement of doing things backwards…
Thanks for the conditional statements and useful hacks, I know you ‘shouldn’t’ use them but some times it’s the only solution when dealing with IE6.
Great tips. These are most useful hacks for IE.
Danke
I read this article after reading numerous articles about the Google-China-IE-exploit-hole-blah-blah-blah. I am glad that my small business market has no desire to worry if their websites function in IE6. This is mainly because of me pointing out the perils of something that is outdated and unsafe! I am using a wonderful piece of javascript found right here at CSS-Tricks on my current 3 projects and will be adding it to all future projects. I am of the mindset that feeding into something that is broken will never allow it to truly be fixed. Begone IE6 you dirty bastard!
Chris, thanks…you just saved me many hours in the future. I can remember !FONDLY! being up at 3AM working on a deliverable and everything was great except for IE6 compatibility……Such fond memories…no more!
I have been looking for this! But I wonder how many browsers support the !IE rule? I mean wouldn’t it be better to just use the regular link instead of putting it in a comment?
Why using hacks in the first place, just download en use Conditional CSS, http://conditional-css.com/
i have try this example but i need css different browser different css that example not working perfectly. please you will try and let me know
After designing and coding websites for 15 years now, I slowly got to the point, where I’m able to do any layout without even one IE specific css or hack except for maybe png’s. Makes handling of the site and life a lot easier. I now laugh at others needing an seperate IE6/7/8 and what not stylesheet… nightmare!
When I code, I often just take a quick look at IE6/7/8 in the process to make sure, but rarely need to adjust something. Most things are possible to do pixel exact, sometimes you just have to accept slight differences. It also depends a lot on how you design a layout and what your excpectations are. For years I was like crazy spending lots of time creating IE stylesheets and using hacks just to have it 2 pixel more to the left and didn’t know better or wanted to change to try different. What a waste.
Reducing HTML code and go for the most minimalistic code possible and the right way of padding/margins and floats etc., is what turned out to be the way to go. Of course experience in what is possible and what can cause problems in different browsers, and also adapting each new project to try it different and not stick with “how I do it always”, helped alot.
I have to agree with @soma on this. I’ve never needed a specific IE 6/7/8 hack – just test as you code in all (well, as many as you can muster) browsers and if it truly is f***ed in IE work around it. You are a designer – it is a challenge! – First rule of web page design I was taught ” a clean well presented layout makes for easier reading, a happier visitor and a credible web page”.
Once in a while the png scenario pops up but there is a quick easy work around/hack article on this site somewhere. As stated above – get the basics learned and learned good (padding, margin, float, “display: inline;” – and build from there.
I kind of agree that most of the time, it’s possible to produce css that works across most browsers. In my experience, I’ve found that the exceptions are a. using other peoples plugins (jQuery plugins etc…) and b. inherited projects from other designers. Other than these two situations, I typically don’t have to use conditional comments.
By using conditional stylesheets you are punishing your IE users with an extra additional HTTP requests for the conditional item. 1 Doesn’t sound like much, but if you use a crap browser like IE. Every request counts to have good performing web page.
There for I would advice to use CSS hacks instead.
Oh, and you forgot the star hack for IE7 and lower
*background:red;
what do you think of the Google IE8.js ?
It does what it claims, and is good for getting older IEs to recognise some of the more advanced CSS selectors, but it is pretty hefty (about 40k), and I have noticed a considerable lag in page load times whilst it does its stuff.
Not worth it if you only have a few issues that can be fixed with a couple of extra lines of CSS.
I have a problem with png files in internet explorer 6, “how to remove the background”
hi
you need remove to background in png in <img /> tag you have put so apply pngfix.js and you have use in background class so use filter background css
please check this example
http://jquery.andreaseberhard.de/pngFix/
I have found DD_BelatedPNG to be a good solution
http://dillerdesign.com/experiment/DD_belatedPNG/
As it gets around the some of the issues experienced with the MS Filters by using VML instead.
Chris, unless I’m missing something, you seem to have made a mistake. You’ve listed “* html (selector)” as “IE7 Only” but that should be “IE6 Only”.
For “IE7 Only” someone else pointed out the “first-child+html” hack, which works, but apparently you can also use “*+html (selector)”. That seems to target IE7 only as well, but I’ve never used it in a real example, just in tests.
I once tried these codes but it doubled my work. Then i tried CSS reset and able to make one CSS file for ever browser. I think if we use CSS reset and know some bugs in IE6 bout float we can easily create global CSS.
Really good article. I am also fade-up with IE6.
Danke!
One addition on the hacks
Körper
{
background: white; /* all browsers */
*background: black; /* will show black on ie7 only */
_background: blue; /* will show blue on ie 6 only */
}
so no need for * html ….. Much simpler ah?
Just make sure you put the one for all browsers first, of course, so it doesnt overwrite the other ones!
Curious: How did I find this out? Accidentally: After so many years coding I accidentally placed an _ before a command and noticed that it was working only on ie6. The * for ie 7 I learned from Michael at Bravo TV.
You know micro-s did that on purpose. Now that bill jumped ship maybe they can get there act together. also pass word protect the registry micro-s! Nice work on Your sites Chris
Hello All,
I need a solution for my site css (i have been stuck :(
i am using jquery toggle and toggle a div when click “Kisa Yollar” (on the top right of page, means shortcuts), in firefox or chrome, it works great but in ie the div goes more right (out of page)
Here is sample page
http://www.ihaletakipsitesi.com/ihale_tarihi_yaklasanlar_konuk.asp
I will be appritiate if you help me for this, and thanks so much
All the best
Ozgur
I LOVE YOU! Firefox is so much better than IE.
hi all,
might share this in case anyone has wondered if there’s an easy way to trick wordpress to take another css if IE6 is used to view a site. so you could make a modern theme for IE7 and proper browsers, but also have it working with IE6 and below.
short description of how to do it using the stylesheet filter is here
I have problem with conditional stylesheet. You can see on http://www.parkic.byethost7.com/ I made two stylesheets. One for lt IE 7, and other for IE7, IE8 and other browsers. The point is that my statementdoesn’t actually work, which gives me a plenty of headache. Any solutions?
Is it really worthwhile to create style sheets for IE 7, IE 8, IE6 and then one for other browsers? I use a style sheet for IE only and one other for others. I make sure that everything looks OK in Firefox and Safari and then I reposition everything in the IE specific sheet. Shouldn’t that be enough?
Today IE6 has dropped down to 10.2% as soon as it gets into single figures I’m going to drop support. Most of its quirks I can handle, but the fact that it completely screws up when you have a png background really compromises my designs. Who on earth uses IE6 anyway?
wow, I never thought this could be possible. Thank you so much
I have one site which is giving me trouble with IE 8 and Firefox. It wont render a drop down menu as Google Chrome. I tried to change the “if lte IE 6” to “if lte IE 8” and still not working. Please help if you have any idea
Hier ist die Website: bestofcampuscrimelog.com
Hallo zusammen, kann mir bitte jemand dabei helfen. Ich versuche nun schon seit Tagen, dieses float/margin-Problem in IE6 zu beheben. Ich habe display:inline; ausprobiert und alle Möglichkeiten recherchiert, aber ohne Erfolg.
Bitte überprüfen Sie dies, Sie können sehen, dass das Problem in IE6 sowohl im Header als auch im Hauptinhalt liegt. Wie kann das behoben werden?
Hier ist der Link
omved.boldwerks.com
Vielen Dank, das ist verrückt,
-Adam
Toller Beitrag! Dies ist mein erster Versuch, eine CSS-Datei speziell für IE zu erstellen. Ich habe den Code von oben genommen
<!-- [if lt IE 8] -->Und es scheint auf der Startseite gut zu funktionieren, aber es scheint auf anderen Seiten meiner Website nicht zu funktionieren? Ich habe hier in meinem Blog ein paar weitere Details hinzugefügt http://bit.ly/9q6xdF
Würde mich über Ratschläge freuen,
Danke
Hallo Chris, schöner Beitrag. Sehr informativer Beitrag.
Der folgende Code identifiziert korrekt Internet Explorer 5.
<!–[if IE 5.0000]>–>
Internet Explorer 5.0!
IE 5, das mit Windows 2000 ausgeliefert wurde, hat einen Versionsvektor von 5.0002. Bitte beachten Sie: Der bedingte Ausdruck [if lte IE 5.0000] gibt false zurück, wenn er in der Release-Version von IE 5 ausgewertet wird.
Der Wert des Ausdrucks wird übrigens als Versionsvektor bezeichnet.
Danke!
Versuche den Code hier zu senden..
echo”
";\n”;echo"<!--[if IE 5.0000]>\n";
echo"<p>Internet Explorer 5.0! </p>\n";
echo"<![endif]-->
ok. das sollte funktionieren :) Entschuldigung für das Obige.
Einige haben seltsame Aktionen mit IE 5.5 experimentiert
Vielleicht hat IE Recht! Ich denke, man muss genauer sein, wenn man auf IE abzielt. Stattdessen kann man dies versuchen
Im folgenden Beispiel wird nur die Hauptversionsnummer angegeben; daher wird der Code sowohl für Internet Explorer 5 als auch für Internet Explorer 5.5 als wahr ausgewertet.
<!--[if IE 5]>
<p>using any incremental version of IE 5! </p>
<![endif]-->
Ich hoffe, es hilft.
Danke!
Vielen Dank für diesen wunderbaren Hack für IE. Es hat einige Zeit gedauert, aber langsam komme ich mit IE zurecht.
;)
Hey
Also habe ich ein Stylesheet erstellt, um mein CSS zu reparieren, wenn auf meine Website über Internet Explorer zugegriffen wird.
Es scheint jedoch nicht zu funktionieren (ich weiß, dass das Stylesheet verbunden ist, weil ich die Schriftart des Bodys ändern kann, aber ich scheine meine Menüschaltflächen oben auf der Seite im Header nicht ausrichten zu können). Ich habe sogar versucht, mein CSS aus meinem ursprünglichen Stylesheet (das sowohl in Chrome als auch in Mozilla funktioniert) zu kopieren und in das IE-Stylesheet einzufügen, aber nada.
Im Moment ist dies in meinem IE-Stylesheet, mache ich einfach einen dummen Fehler (das ist alles noch sehr neu für mich)
nav ul a{
display: inline-block;
text decoration: none;
width:100%;
text-align: center;
}
nav ul {
}
.menu ul al{
display: inline-block;
text decoration: none;
}
Die Website, an der ich arbeite, ist emily-jayne.net
UND, was ist mit IE11? irgendwelche Ideen?
Vielen Dank. Dies ist eine sehr nützliche Ressource.
Nur ein Kommentar: Wie Sie sagen, unterstützen IE 10 und höher keine bedingten Kommentare, und das andere Problem ist, dass sie die Stile darin ausführen. Das heißt, wenn Sie beispielsweise einen bedingten Kommentar nur für IE8 hinzufügen, wird dieser von IE8, IE10 und IE11 ausgeführt... Das ist ein Albtraum.
Das glaube ich nicht. Sie sollten auf HTML-Kommentare zurückfallen und in 10/11 ignoriert werden.
Vielen Dank. Dies ist eine sehr nützliche Ressource.
Meine Frage
Anderes CSS für jeden Browser?
wie Safari, Chrome, Mozila, IE
Bsp.
<!–[if gte IE 7]>
<![endif]–
Und mit Mozilla
<!–[if gte MO 7]>
<![endif]–
Irgendein Trick?
Ich fürchte, bedingte Kommentare sind nur für Internet Explorer. Das Erkennen anderer spezifischer Browser kann möglicherweise durch "User Agent Sniffing" erfolgen, aber das ist schlecht: https://css-tricks.de/browser-detection-is-bad/
** Jetzt habe ich eine Lösung gefunden, um browserweites CSS für jeden Browser zu handhaben**
Bsp.
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix.css”/>’);
if(isSafari){
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_safari.css”/>’);
}else{
document.write(‘<‘+’link rel=”stylesheet” href=”/weddix_browser_default.css”/>’);
}
Zunächst einmal bin ich neu im Styling, daher könnte ich etwas falsch vermuten…
Sir, glauben Sie nicht, dass das Hinzufügen von zu vielen zusätzlichen CSS-Sheets die Anzahl der HTTP-Anfragen erhöht, was die Ladezeit der Seite erhöht, und mich interessierte, ob es eine Möglichkeit gibt, diese bedingten Anpassungen innerhalb eines einzigen Stylesheets vorzunehmen…
Außerdem interessierte mich, ob Ihr responsives Menü nur auf CSS basiert oder auch jQuery oder JS benötigt…
Hallo Himanshu, Sie können IE ansprechen, indem Sie die
<!--[if IE]>-Anweisung um Ihr Stylesheet-Tag verwenden.Als Antwort auf Ihre erste Frage kommt Chris am Ende seines Artikels zu dem Schluss;
Dieser Artikel ist jedoch sehr alt und sollte nur als Leitfaden verwendet werden. Beispielsweise werden HTML5-Attribute wie
placeholder,box-shadowund andere in alten Versionen von IE (8 und darunter) nicht unterstützt, sodass bedingte Stylesheets nützlich sein können, um IE-Benutzern, die nicht von den Vorteilen moderner Browser profitieren, eine bessere UX zu gewährleisten. Natürlich können Sie auch eine "Upgrade your browser"-Nachricht mithilfe von Bedingungen anzeigen.Was ist, wenn wir einen Stil für IE9 und darunter verwenden möchten? Ich möchte in IE9 und darunter eine Volltonfarbe anstelle eines Farbverlaufs geben.