Enforcing compatible mode for IE - html

Executing my below code in IE browser and found look& feel issue in rendering the content based on the included font-awesome-ie7.min.css. Tried this code in IE8 browser mode with document mode (IE8 &IE7 standards)
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if IE 7]>
<link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css">
<![endif]-->
Not rendering properly.

Looks like you have included a stylesheet for IE7 and trying to view output on IE8 while css will not work on this. To get output on IE8 you should try writing like this...
<!--[if IE 8]>
<![endif]-->
Hope this helps!

You need to tell us what version of IE you're using to test. IE 11 dropped support for conditional comments so it won't matter what you have as a conditional in there.
I would use lte (less than or equal to) IE 8 if you want to load for 7 as well.
You should load the regular font awesome css asset before the conditional statement. Load order is important.

Related

Conditional comments not working in ie11

I'm trying to use conditional comments to load webcomponents polymer polyfill on ie11 and webcomponente-lite polyfill on ohter browser so I have:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/roboto-condensed/css/roboto-condensed.css">
<!--[if IE]>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<![endif]-->
The issue is that webcomponents-lite.min.js is always loaded, event in IE11
Any suggestion?
IE 11 does not support conditional comments.
Conditional comments are no longer supported
Impact Applies to Internet Explorer 10 and later. Affects IE10
Standards mode and later, including interoperable quirks mode. 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.
You'll need to try another way to target IE11 specifically.
Searching around SO brought me to this answer, which uses feature detection to determine whether or not to load Polymer's polyfills.

How to make twitter bootstrap compatible with IE8?

I included below tags in my example, Still it's not working. col-md-* is taking full with of the div. col-md-* width is not showing at all in developer tool.
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<script src="respond.min.js"></script>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<![endif]-->
For supporting #media queries in IE 8 and below, check out
https://code.google.com/p/css3-mediaqueries-js/
css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Reference: Twitter Bootstrap Responsive layout does not work in IE8 or lower
Also See : http://getbootstrap.com/getting-started/#support-ie8-ie9
Update: There are plenty of questions/answers. You Just need to google it.
Have you look the size of your CSS, For IE up to IE9 the css file size is max 288kb. Maybe thats is a problem

Internet Explorer browser version specific document mode

I want my application to be opened in
document mode IE-8 for an IE-8 version browser and
document mode IE-9 for an IE-9 version browser.
Otherwise the application will fail to open some tabs.
The <meta> tag to force the browser to open in a particular document mode is like this
<meta http-equiv="X-UA-Compatible" content="IE=9">
If we dont use a <meta> tag, sometimes the browser is opening our application in a different document mode.
I am using html concept.
Please tell me how we can change the document mode properly according to the browser version.
Try IE=Edge
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=8"> or do whatever you want
<![endif]-->
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=9"> or do whatever you want
<![endif]-->

Why is IE specific stylesheet is being ignored

I have the following stylesheet inside the HEAD piece of my website:
<!--[if !IE]-->
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[endif]-->
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->
I am running IE version 10 but for some reason it is reading the non IE stylesheet. Any idea how to fix it? Do I have to be specific in the IE condition?
I looked in the developer tool, and only the NON IE version has been loaded...
Ended up using this:
<script type="text/javascript">
if (window.clipboardData)
alert("You are using IE!");
else
alert("NON IE");
</script>
Per Microsoft:
As of Internet Explorer 10, conditional comments are no longer
supported by standards mode. Use feature detection to provide
effective fallback strategies for website features that aren't
supported by the browser.
and
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.
Only allow the IE style sheet within the conditional comments for IE. Your regular style sheet does not need the conditional comments. It should read as follows:
<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />
<!--[if IE]>
<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />
<![endif]-->

Meta tag force to use IE Edge or IE8 but not IE9

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]-->