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]-->
Related
Okay, so I've made a web dev site (ironic given that I can't fix it, I know.) and some users are reporting that only the HTML is loading and no CSS/JS is. It seems to mainly be affecting IOS users, and we can't replicate the error ourselves. We've had one instance of it occurring off of IOS.
/*Our only CSS file*/
<link rel="preload" href="css/min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/min.css"></noscript>
/* Example of how we use JS files */
<script async src="js/jquery.flexslider-min.js"></script>
We gzip our files before sending them across too if that has any effect?
Our styles are vendor-prefixed too so it's not that.
Link preloading doesn't appear to be supported in iOS Safari. At least according to this: https://caniuse.com/#search=preload
A standard CSS link should work just fine, at least until support for preload is more widespread.
<link rel="stylesheet" type="text/css" href="css/min.css">
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.
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 still new to JQuery and BluePrint. BluePrint recommends adding the following lines in HTML pages headers to tackle Internet Explorer related issues:
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
But, is this really necessary if one uses JQuery to manipulate pages?
Yes.
jQuery does not patch poor IE CSS support out-of-the-box. The Blueprint file attempts to 'reset' IE so that when you apply your own styles, they look in IE more like they should do (i.e. how they look in compliant browsers).
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.