So I'm seeing something quite weird. I'm running Windows 8.1/IE11, not sure if that is important or not.
I've inserted the following html comments. One is pulled straight from the HTML5 boilerplate so I'm sure that's right at least.
When I open up the dev tools, I can see the comments in the DOM in IE11 and with the emulator to IE10. As soon as I go to IE9 or below in the emulator with document mode and user string. All of the conditional IE HTML comments you see below and just the conditional IE comments are for some reason no where to be seen.
Has anyone ever seen anything like that? Have any clue why it might happen? I've searched exhaustively to no avail.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.PlatformModel.PlatformTitle </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="~/Scripts/html5shiv.js"></script>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="~/content/platform/css/ie78.css"/><![endif]-->
<!--[if lt IE 9]>#Styles.Render("~/Content/platform/css/IE78.css")<![endif]-->
<!--// kendo common, kendo theme-->
#Styles.Render("~/Content/kendo-common-styles")
#Styles.Render("~/Content/kendo-theme-styles")
<!--// platform -->
#Styles.Render("~/Content/platform-styles")
<!--// page styles -->
#RenderSection("styles", required: false)
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
You might want to update Windows and install the latest patches. The F12 tools in IE11 at RTM shipped with a bug* where the emulated document modes wouldn't respect conditional comments. That's since been fixed.
* http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools
Related
I face 80020101 error issue in ie9 and half of my script classes face this issue so I cannot fix it and my site works well in ie8. How can I force to use IE8 if the browser is IE9 but if the browser version is higher than IE 9, that one should be used.
You can try this:
<!DOCTYPE html>
<html>
<head>
<title>My Web</title>
<meta http-equiv="X-UA-Compatible" content="IE=80" />
The meta must be the first after the title. But not sure if this will solve the issue 80020101. Not everything will be running in IE9+ if it was using some deep stuff of the IE 8-
To target the edge check this question: Why does IE9 opens in Document Mode as IE7 standards?
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If I understood well you want to force IE 8 when browser is IE 9 and let it free when it's a higher version. You can do it with conditional comments:
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=80" />
<![endif]-->
This will include meta only for IE 8 and will leave it out for any other version. Please note that unless you're facing an IE 9 specific bug then you may have the same issue on higher versions, maybe because IE 8 was broken). To solve this I would rewrite your scripts to work on IE 9 and I would conditionally include old scripts when IE 8:
<!--[if lte IE 8]>
<script src=oldscript.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script src=newScript.js"></script>
<![endif]-->
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.
I would like to utilize boilerplatejs for an upcoming intranet project, however, many of the machines are still WinXP with IE8 (and there's no option in the orginazation for wide-scale Firefox or Chrome deployment).
I've quickly tried incorporating the html5shiv, but that didn't seem to help. It doesn't appear routing or other functionality is working. I'm trying to figure out if this is even worth doing or if someone else has tried to get this working before spending more time on it.
Not really. That's what the code in h5bp is about
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Those are conditional clauses for graceful degradation of ie < 9.
If this is a project where many people will be on ie<9, it might be better to use xhtml...just an engineering consideration
In fact, the most difficult problems you'll encounter are not about boilerplatejs but external libraries.
Specific tweaks depend on the features you leverage in your application, but for a start all you need to to is to
add html5shim to support HTML5 elements like <section>
include json2 library for missing json serialization support
[optionally] include explorercanvas to enable flot charting
Put this inside your <head> section:
<!--[if lt IE 9]>
<script type="text/javascript" charset="utf-8" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript" charset="utf-8" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
With this snippet you'll get boilerplatejs example page working, with routing, themes and i18n support.
Then, you'll notice that in the Click Counter example you don't win regardless how many times you click on the button. This is because LOTTERY_ACTIVITY event published by clickCounter/clickme component doesn't reach any listeners due to a bug(?) in pubsub.js library (I even submitted an issue some time ago). To resolve it, patch libs\pubsub\pubsub-20120708.js, changing
params = (args.length > 1) ? Array.prototype.splice.call(args, 1) : []
to IE8-compatible call:
params = (args.length > 1) ? Array.prototype.splice.call(args, 1, args.length-1) : []
Congratulations... You WON!!!
I leave fixing remaining issues in the Backbone TODO module up to you, you may use the original code as a guidance.
To summarize, I would say that boilerplatejs is fully IE8-compatible, with any incompatibilities coming from supporting libraries, not the core code.
BoilerplateJS core is not designed with any HTML5 features. Though I haven't tested it in IE8, I believe this is very much possible with some adjustments. For example, if crossroadsJS, the library used for routing is not compatible with IE8, still you may easily replace that with pathJS or something else that is IE8 compatible.
I am in need to know which is the current browser my website is being viewed on, because that way I know how to execute specific code for Images and CSS, stuff like that...
Check out Modernizer and Selectivizr
As your comments suggest that you only need IE detection, the best way I've seen of detecting IE for CSS purposes is used in the HTML 5 Boilerplate project, which uses a technique by Paul Irish:
<!--[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]-->
I'd recommend using the HTML5BP version:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
There are both PHP and JavaScript classes/functions for this. All you have to do is google for the respective one and then use it to your liking on a per browser basis. You could even go a step higher and do it based on .htaccess but over all depends on what your doing with what where when why etc..
All in all though generally speaking short of some styling issues, or some specific client side scripting issues almost anything you do with just standard html will work fine cross all browsers.
you can check the browser info with javascript embedded into html.
more details can e.g. be found here:
http://www.alanwood.net/demos/browserinfo.html
example code: (now works for sure)
<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
<script>
alert(navigator.userAgent);
</script>
</body>
</html>
You'll want to inspect the navigator.userAgent property. There are a few Javascript libraries that you can download that will do this parsing for you. However, you should know that trying to determine the browser type by parsing the user agent string is incredibly unreliable.
If you're trying to toggle behavior based on browser capabilities you should instead check for those specific features and see if they are enabled in the current browser. You can start by reading this post on QuirksMode.
Someone else mentioned Modernizr which is just a library that does the feature detection for you. This is much more reliable than inspecting the browser's user agent.
Use XPath APIs to determine the browser engine:
//Gecko
var gecko = (!!window.XPathExpression === true) && "gecko";
//Trident
var trident = (!!window.XPathEvaluator === false && !!window.XPathExpression === false) && "trident";
//WebKit
var webkit = (!!window.XPathEvaluator === true && !!window.XPathExpression === false) && "webkit";
var browser = (String(gecko)+String(trident)+String(webkit)).replace(/false/g,"");
Use document.documentMode to detect which mode IE is using as well.
References
Windows Internet Explorer Platform APIs
Mozilla Source Code Directory Structure
MDN: Web API Index
WebKitJS
Planet Webkit
Web specifications support in Opera
Details for Document API - Microsoft Edge Development
UPDATE: I couldn't tell you what changed to save my life, but suddenly it's working... Thank you everyone for your help.
I have a default CSS style sheet, an IE specific stylesheet, and a IE7 specific stylesheet.
On Windows 7 in IE8 the IE sheet is loaded, and in IE8 Compatibility mode the IE7 sheet is loaded.
On Windows XP in IE7, neither stylesheet is loaded, thus breaking (or rather, not fixing) my layout. This brings up a couple of questions...
Does IE7 on XP use different language to call browser specific style sheets? Was there a different standard for calling sheets when it was made?
This is what I have currently:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ieprocessstyle.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7processstyle.css">
<![endif]-->
Could it be caused by some bug or error on the machine I'm using? Could different machines with XP and IE7 act differently?
Hopefully someone can shed some light on this for me. The site is for a large corporation and they forced me to go live already so I'm just waiting to get a call from the Big Bad Angry Voodoo Daddy....
There is no special syntax for IE7, here is a conditional set that works in 6, 7 and 8:
<!--[if lte IE 8]><link href="/_ui/css/ie8.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if lte IE 7]><link href="/_ui/css/ie7.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if lte IE 6]><link href="/_ui/css/ie6.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
Here is a code reference for IE conditionals:
http://www.quirksmode.org/css/condcom.html
So first should load in all IE versions and second should, in addition to first, be loaded for IE 7 right ?
Nothing wrong with the syntax.. (you could correctly close the tag at the end in the IE7 version />), and nothing different in syntax between versions.. the problem must lie elsewhere..