First off I'm sorry if this has been answered already I just spent 45 minutes trying to find and answer and couldn't come across one that I felt sure about. I'm trying to use flexbox on my site and am trying to target IE 9 AND less for a fallback alternative.
I've seen some hacks and have seen people say to do this:
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="belowIE10.css" />
<![endif]-->
I've seen a lot of people say that doesn't work though. I'm assuming it's because conditional comments were dropped in 10 and internet explorer doesn't understand what lt IE 10 is.
My best guess is checking for less than or equal to 9. I have a mac though and can't actually check this out without something like browserstack.
<!--[if lte IE 9]>
<![endif]-->
Does that work for IE9 and below?
IE10 doesn't understand conditional comments, but that simply means it sees the lt IE 10 and everything else inside as one giant HTML comment, as the syntax highlighting shows.
So there is no difference between <!--[if lt IE 10]> and <!--[if lte IE 9]>: IE10 will ignore both, and IE9 will match both conditions. You could even go with <!--[if IE]> and that wouldn't be any different.
Related
Why the following code download BOTH 2.0.2 and 1.9.1 in IE8? (actually it's IE9 but in IE8 browser mode)
I am not so sure on the syntax, just copy/paste it from somewhere. But it works as expect on Firefox (only download 2.0.2) and IE9 (only download 2.0.2 as well), but on IE8 (again, IE9 in IE8 browser mode) both files get downloaded.
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<!--<![endif]-->
</head>
BONUS question:
What's the complication if both jquery files are downloaded?
The correct code according to MS is:
<head>
<!--[if lt IE 9]>
<script src="{{STATIC_URL}}js/jquery-1.9.1.min.js"></script>
<![endif]-->
<![if gte IE 9]>
<script src="{{STATIC_URL}}js/jquery-2.0.2.min.js"></script>
<![endif]>
</head>
As you can see the first block is the same. The second block has had some syntax removed that was unnecessary and almost certainly what was confusing things. Additionally it uses the "downlevel-revealed" syntax of conditional comments which will display on everything that doesn't recognise this conditional comment syntax.
Searching for "internet explorer conditional comments" was all that was needed to find this definitive help page: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
On further investigation your original code looks like it was based on that given in http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/ . I would guess therefore that this should work and therefore your problems are more likely coming from your rather interesting test environment which is both IE8 and IE9 at the same time.
This question must be a duplicate, but I can't find the definitive answer on here.
How can I tell the browser not to load a script, if the browser is IE8 or below?
I know about targeting IE9 and above:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
but then the script does not load in non-IE browsers.
How can I say "load the script if not IE, or if IE and greater than IE8"?
Conditional comment for 'Except IE8'?
<!--[if gte IE 9]><!-->
// Your script here. This will only be loaded if IE version is greater than 8, OR any other browser.
<!--<![endif]-->
Should work?
I have been looking for an explanation of why this part of the html tag conditionals for IE in the HTML5 Boilerplate have this part:
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
I ask just so I have an understanding of how this is working. I understand the conditionals above this one, but why is this one different than those above it? I don't get what this condition is doing compared to those above it.
Thank you in advance for helping me to understand something that I will be using.
Basically, the last part is used for IE versions 9 and up, and all other browsers. However, the syntax is shorter and not as straight-forward as it could be because HTML Boilerplate is heavily concerned with optimization.
I found the article that explains it, I recommend you read the whole thing:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Here's my proposed solution:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
This was actually updated afterwards due to issues you can read about in the article.
Apparently part of the weird syntax has to do with a Dreamweaver(!) bug. Here is an excerpt:
Here is the new recommendation, and the one that's in use in the HTML5
Boilerplate.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Basically, the last line is saying "Do this if IE9+ or not IE". Some of the bullet points below are not directly related to your question, but I'll include them anyways.
Why?
This fixes a file blocking issue discovered by Stoyan Stefanov and
Markus Leptien.
It avoids an empty comment that also fixes the above
issue.
CMSes like WordPress and Drupal use the body class more
heavily.
This makes integrating there a touch simpler It doesn't
validate in html4 but is fine in html5. Deal with it.
It plays nicely
with a technique to kick off your page-specific javascript based on
your markup.
It uses the same element as Modernizr (and Dojo). That
feels nice.
I left an empty class in there because you'll probably be
putting a no-js in there or something else. If not, delete.
Also if
the extra comments around that last tag look weird to you, blame
Dreamweaver, which chokes on normal !IE conditional comments.
More discussion about this issue here: https://github.com/h5bp/html5-boilerplate/issues/425/#
I'm a university student, and just built my first website for an internship. We are approaching the launch of the site, however during my debugging process I've found that of all places, it doesn't work on my boss's machine and browser combination. She uses a Vista OS and internet explorer 7 for a browser. I know IE7 is outdated, but according to broswershots.org IE7 will still render the site mostly correct on an XP operating system.
The main page of the site is accessible here
Here are screenshots of what happens with the Vista/IE7 combo:
Please let me know what you think, as any ideas would be extremely helpful. Thanks!
In your boss's browser, go to Tools, Internet Options, Accessiblity.
She may have checkboxes checked that override font settings.
"IE7 will still render the site mostly correct"
Sadly, no. IE has a long history of being crap and ignoring web standards. IE6 was notorious for this. IE7 a pain. IE8 a bummer and IE9 is mostly now just a small annoyance.
Bottom line is that you likely have IE7 bugs appearing. It's not necessarily indicative to bad markup or CSS, but rather just problems with IE7.
The typical solution is to use IE conditional comments to render a unique class name to the BODY tag. You can then over-ride the standard CSS just for a particular version of IE7 to bend it into submission:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
And then in your css you can do this:
.myClass {...standard styles...}
#IE7 .myClass {...ugly hack just for IE7...}
#IE6 .myClass {...ugly hack just for IE6...}
<!--[if IE 6]>
I am using IE6
<![endif]-->
That works.
How do I do "or" IE7?
If you, for whatever reason, what to only test for IE6 or IE7, and maybe have some other conditions for IE5 elsewhere, there is also support for other operators:
<!--[if (IE 6)|(IE 7)]>
This is IE 6 or IE 7!
<![endif]-->
Check out the wikipedia article which has better documentation than Quirksmode on this.
you can do
<!--[if lte IE 7]>
I am using IE less than or equal to version 7
<![endif]-->
Have a look at http://www.quirksmode.org/css/condcom.html#link3 for detailed options..
same exact format. just change the ie version. Refer to here.
http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx