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
Related
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.
I'm beginner in html and want to design simple site,i write any html code on my web and html head tag code is:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop Homepage - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-homepage.css" rel="stylesheet">
<!-- 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="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
but that code just show me correct in microsoft edge,and dont show correct on firefox or any browser,how can i solve that?thanks.
You might be misunderstanding the purpose of this line:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
That line does NOT mean "will work in Microsoft Edge"
It instructs current and older versions of the Internet Explorer browser (and NOT edge) to use the most current document processing rules, rather than try to guess at the web developer's expectations as to how the web page document should be processed in Internet Explorer.
When the web developer includes the meta header, it tells IE to always assume that the web developer has tested the website against the latest version of IE, specifically regarding the "Compatibility Mode" of IE, and does not want IE trying to turn on Compatibility View.
Chrome, Firefox, and other browsers will ignore that line.
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.
I've noticed a small issue in that when the page loads, using IE8, the main top navigation, using Bootstrap 3.1.1, starts off collapsed and then when the page has finished loading the main top navigation resizes to full width, i.e. normal size. This creates a bit of a jump on the page, which isn't ideal. It is particularly apparent on slow connections and only appears to occur in IE8. Any ideas or anyway to smooth it out somehow?
I'm including all the usual bits:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script src="~/scripts/html5shiv.min.js"></script>
<script src="~/scripts/respond.min.js"></script>
Sorry I can't add this as a comment because I don't have enough rep...
What is the order you are laying out your conditional comments? You should be loading your CSS and the rest of the script before you do the IE8 conditionals.
If that's all correct, then Paul Spranger's solution might work for you (ref: http://www.paulsprangers.com/2011/09/remove-respond-js-screen-flicker/). Seems like it might be directly related to respond.js.
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]-->