I'm trying to make media queries work on IE8 (Because my company use it, sad I know.) and I already found things like respond.js. The irritating thing is, when I use this link : http://scottjehl.github.io/Respond/test/test.html on IE8, it works perfectly...BUT ! When I download the lastest version of respond.js, and try to launch this exact same test.html page, it doesn't work ! I didn't edited anything, and even the test page written by Scott Jehl doesn't work. Some help please, before I go nuts.
:|
Let's gather some info around the net...
In Bootstrap's test file here http://getbootstrap.com/getting-started/#template there are some lines in code which say:
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Drupal page here https://www.drupal.org/node/2173441 says:
Due to browser security rules, Respond.js doesn't work with pages
viewed via the file:// protocol (like when opening a local HTML file).
To test responsive features in IE8, view your pages over HTTP(S). See
the Respond.js docs for details.
So, lets go where we should be from the very beginning...The official docs :D
Respond.js doc
...which say, among others,
Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark
(BOM), they will not work with Respond.js in IE7 or IE8. Noted in
issue #97
WARNING: Including #font-face rules inside a media query will cause
IE7 and IE8 to hang during load. To work around this, place #font-face
rules in the wide open, as a sibling to other media queries.
...So if you have a problem with respond.js and ie8 be sure to make a quick check on all of the above and of course, read the official doc.
also worth reading: http://nextflow.in.th/en/keep-your-responsive-web-design-against-the-legendary-internet-explorer-ie6ie7ie8/using-response-js-to-make-ie6ie7ie8-understand-your-responsive-design/
Put response.js after all CSS you use in web page. Except you are
ready for weird action.
Response.js has an issue with CDN & domain.
Problem solved !
I had to put my project on a webserver to make it work. Just opening the html file isn't enough.
Related
I have been doing quite some research on how to make Bootstrap work with IE 8, but it still looks like this:
What I did so far:
Insert into the <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Insert respond.js
-> But still the same. Is the problem the subdomain? Or is my IE 8 just too old? Funny is I tried to update it, but could not get it updated. I'm a Mac guy, maybe I need some extra degrees for that... Microsoft only offered me IE 10/11.
URL to the form: inday.idext.co.th
If you wish to have a look at the PHP file: pls click
Thanks so much in advance, I'm really lost with this browser. :-(
It looks like you are using Bootstrap version 4.0.0-alpha. Line 36:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
From the Bootstrap v4 docs: Supporting Internet Explorer 8
As of v4, Bootstrap no longer supports IE8. If you require IE8 support, we recommend you use Bootstrap 3. It’s still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
Alternatively, you may add some third party JavaScript to backfill support for IE8 to Bootstrap 4. You’ll need the following:
The HTML5 shiv
Respond.js
Rem unit polyfill
No support will be provided for this, though you may find some help from the community in our Slack channel.
So taking their suggestions, either follow the above options to get a working solution or opt to use version 3 which is currently the stable release. Other than those solutions, I'd say you would need to hire someone extra with the required skills to help build your site as fixing everything on your product with the alpha of v4 is outside of the scope of this site.
Add to head:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
Is there a way in JAVASCRIPT (not jquery) to stop navigating a webpage in IE8 ?
( if i use jquery, a error appears : SCRIPT5009: jquery is not defined.).
In a company is still using IE8, They want to left behind little by little, so they need to send an ALERT when the user start navigating an specific webpage.
Note: Works perfectly in IE9 and Chrome
Regards
You can put scripts inside tags like this. These tags say run these scripts on versions of Internet Explorer that are below 9. So, you could write a script that posts a notice on your page about using outdated browsers.
<head>
<!--[if lt IE 9]>
<script src="outdated-browser-notification.js"></script>
<![endif]-->
</head>
We are building a website for a client but cant seem to find the bug which causes the images under the slider not to load.
There are some posts going around about the .load function not properly working in IE.
Does anyone have an idea?
http://mbx.web-flight.nl/
Greatly appreciated.
You're problem is Internet Explorer Quirks Mode. You must define a page header in such a way that IE will load the site in standards mode. Switch IE to standards mode manually and you will see the images load.
Try the following on the page to declare DOCTYPE.
<!DOCTYPE html>
Or try to Force IE to use the latest render mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Learn more about Quirks mode here: http://en.wikipedia.org/wiki/Quirks_mode
Ultimately the BEST solution is to address the problem at the server level if you have access to do so. See http://msdn.microsoft.com/en-us/library/jj676913%28v=vs.85%29.aspx To learn about configuring web servers to specify document modes.
This is what I see. Does anyone see the same as me. If not, I wonder if it is related to Quirks mode.
On IE 10 for me works fine, but in the IE 9 and lower not works.
This could be happens because the IE 9 don't have some elements of HTML5.
I think that you put this in your file will woks.
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
Made a test.
I hope help you.
Link for downloads files
https://code.google.com/p/html5shiv/
After allot of searching the bug had to do with the imagesLoaded function which was being used which is part of:
http://isotope.metafizzy.co/
IE does not seem to play nice with it so I made the carousel to initialize on window’s load event (jQuery(window).load) instead of “imagesLoaded”.
I am using this code to test for media query support as I want to load a polyfill for e.g. IE8.
yepnope({
test : Modernizr.mq('(only all)'),
nope : ['scripts/respond.js']
});
It works (= respond.js gets loaded in oder IE), but now I've just discovered that respond.js also gets loaded in Safari.
After having read the docs I believe that respond.js is loaded because there are some kind of media queries Safari doesn't support. Is this true? How can I solve this issue?
The problem isn't that Safari doesn't support certain media queries, but that (only all) is not a valid media query. There should be no parentheses around the only keyword or the media type all:
yepnope({
test : Modernizr.mq('only all'),
nope : ['scripts/respond.js']
});
I'm using modernizr as well but found the easiest way add media query support for IE7 and IE8 was simply to use something like this in the page head
<!--[if lt IE 9]>
<script src="js/respond.js"></script>
<![endif]-->
Make sure you are calling respond.js after the CSS files have loaded.
This is working well for me.
Good luck!
Should the reference to the Modernizr JavaScript file be in the head of the page? I always try and place all scripts on the bottom of the page and would like to preserve this. And if it needs to be in the head, why?
If you want Modernizr to download and execute as soon as possible to prevent a FOUC, put it in the <head>
From their installation guide:
Drop the script tags in the <head> of
your HTML. For best performance, you
should have them follow after your
stylesheet references. The reason we
recommend placing Modernizr in the
head is two-fold: the HTML5 Shiv (that
enables HTML5 elements in IE) must
execute before the <body>, and if
you’re using any of the CSS classes
that Modernizr adds, you’ll want to
prevent a FOUC.
I would argue no: every script you place in the <head> will block rendering and further script execution. The only thing Modernizr does which must happen in the <head> is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.
I was testing this yesterday and found this to be fairly significant – on the site I work on, which is already fairly well optimized, adding that single script to the head delayed my load-time by ~100ms in IE9, which doesn't even benefit from the shiv!
Since around 90% of my traffic comes from browsers which natively support HTML5 and I don't have core CSS which requires the modernizr classes to display correctly on the initial render, I'm using this approach which places the html5shiv into a conditional comment and loads modernizr without the integrated shim:
<html>
<head>
…
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
…
<script src="modernizr.custom.min.js"></script>
</body>
</html>
Paul Irish is now suggesting that for > 75% of sites, there is no benefit to placing Modernizr in the head.
Move Modernizr to the bottom
It has more potential to introduce unexpected situations, however it's much better for the user to just have no scripts up in the head at all.
I bet >75% of sites dont need it in the head. I'd rather change this default and educate the 25% than watch as we slow down all these sites.
https://github.com/h5bp/html5-boilerplate/issues/1605
How about using IE conditionals in a slightly different way?
What does everyone think of this solution:
Within the <head></head> tags:
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>
Before the end of the </body> tag:
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>
This would result in Modernizr loading in the head for IE8 and below, and it will load before the body for any other browsers.
Open discussion on pros and cons welcome in the comments.