I designed a HTML Webpage, and everything look perfect on Chrome and Firefox.
But on IE9, its show very bad >_<
I wonder, do we have any script or some ways to auto set / fix those thing for IE?
you should include the HTML 5 Doctype. When i loaded the page in IE9, it was forcing the page to Quirks mode. looks mostly ok when I change it to IE9 standards mode.
<!DOCTYPE html>
Also, you could try using the meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
or
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
to force the browser mode to IE9.
I got two, two word phrases for you bro... 'Progressive Enhancement' and 'Graceful Degradation'
Please validate your page first. No proper doctype deceleration. Browser will render your page in QuirksMode. I think some tags also missing.
I don't know any script to do so... But your problem may depend on what properties are you using and if they are supported by IE9. You may want to check W3C site for CSS properties support
It depends on what feature you use. For example if you use a progressbar you can emulate one with javascript. Alternatives are also called polyfill. A good link to use could be the html5 please website
you may want to consider using these:
http://html5doctor.com/html-5-reset-stylesheet/
and:
http://modernizr.com/
Related
I know that there already is a question like this: Force IE9 into browser compatibility view
But since adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the the head section and reloading the page with ctrl+F5 didn't help there must be another way.
On my website is also a bxslider and according to this: bxslider not working in IE9 I replaced the elements (which had empty href attribute) with tags - still not effect. The images of the slider are displayed in full size one below the other. After activating compatibility mode the site works perfect.
I don't wanna rebuild my application from the scratch so what could I do to force the compatibility-view? Or is there at least a good free debugging tool for that? I downloaded the firefox addon IE Tab which has a debugbar but to use it you have to buy a premium version. I just don't know what is causing the error...
I found what was causing the error: Why does JavaScript only work after opening developer tools in IE once?
So frustrating and so simple. It was caused by the console.logs in the script. Without them it works like a charm.
If you use this code at the start of your JS (I use it in all my projects) https://gist.githubusercontent.com/elijahmanor/7884984/raw/console-monkey-patch.js it will override the console.log function so you avoid errors in IE but still get logging in modern browsers like chrome.
How can I turn on IE 10 Compatibility View programmatically in Javascript or HTML?
I just added the following meta tag within the <head> tag, but it is not working.
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >
Is there any way to do the same thing in JS?
I checked the compatibility mode article on msdn - here.
Your meta tag is still the method for enabling compatibility mode in IE 10 and IE 9.
As long as you have:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<!-- Other meta tags etc. -->
<head>
Then it should work. You could try making the http-equiv value case sensitive (at the moment you've set it to lowercase).
Also, to answer your question about JS, you can detect whether the browser is in compatibility mode by comparing the browser engine with the browser version for IE. However, this involves browser version detection, which tends to be a bit unreliable. Also, there isn't a way for you to set the user's compatibility mode in JS. So, for the moment at least, you'll have to stick with the meta tags.
I hope this helps.
A good plugin to allow you to view http header information is IEhttpheaders. Just download it from that link & install. Then, when you start IE, go to the tools menu and select 'DisplayIEhttpHeaders...'. When you visit your site it will list the header response. If you modify your answer to include the response, then we can see if it's the problem.
You say “I just added the following meta tag within the header tag”. Do you mean:
The <header> tag
The <head> tag?
The x-ua-compatible meta tag does need to go inside the <head> tag, not a <header> tag.
I have a problem with opening my website in IE9. When I try to open my site I get this error in dev tools:
HTML1113: Document mode restart from Quirks to IE9 Standards
I googled and found an answer that suggested to use this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
or
<meta http-equiv="X-UA-Compatible" content="IE=IE9" />
...but these do not work and I get the following message this time:
HTML1115: X-UA-Compatible META tag ('IE=Edge') ignored because document mode is already finalized.
What is my problem? I read several articles like IE’s Compatibility Features for Site Developers by Microsoft and traced my site with Determining IE9’s Document Mode flowchart and use all suggestions relating to !doctype on these sites but no-one could solve my problem and my IE engine reset after the page opened.
I develop my site with ASP.NET 4 on Windows Server 2008.
How can I fix this issue?
One solution that should always work is to put your X-UA-Compatible in HTTP headers. Also, your <!DOCTYPE> should be specified at the top of your HTML document (<!DOCTYPE html> is the easiest one).
If you put your X-UA-Compatible declaration inside the meta tag you can run into the following problems:
X-UA-Compatible is ignored unless it's present inside the first 4k of you page. If you put it somewhere in the bottom of your head section (or in the body) move it to top. The best place for it is right after encoding and language declarations.
X-UA-Compatible is ignored if it's put inside IE conditional comments. For example:
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
In this case you should remove conditional comments.
Also, you shouldn't have any text before the doctype declaration. If you've got any HTML comments there, for example, the IE will switch to quirks mode.
Finally, check if you're viewing this site from the intranet. By default Compatibility View is enabled for Intranet sites.
I suggest set X-UA-Compatible header for you page and then see if your site is still switching to quirks mode. In that case you should check your markup and try to fix any HTML validator errors until it's back to Standards Mode.
So in my JavaScript app I am doing some dynamic script injection etc during runtime. Like appending script tags to the head of my document post page on load.
It seems fine if I go directly to the URL of the page through the navigation bar but when I do a right click refresh, IE seems to ignore any or all of my script tag injections.
Has anyone else seen this problem of have suggestions?
Don't see this in Chrome, FF, Safari.
I am using requireJS to do the injection if that makes a difference, but since it just does a document.createElement("script") etc. shouldn't make a difference.
Looks like the problem has actually that I am dependent on the load event ... IE / jQuery seem to be buggy in regards to maintaining the proper execution of onload for window. Using a timeout as a backup to dynamically inject the JS.
You might want to try disabling the use of the cache on those pages. See this: http://www.htmlgoodies.com/beyond/reference/article.php/3472881/So-You-Dont-Want-To-Cache-Huh.htm
According to the article above, one method you could use to disable use of cache is to put
<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</HEAD>
at the END of the page
Can someone help me please?
Am working on this page:
http://www.lorealprofessionnel.co.uk/about-us/loreal-professionnel-portfolio
On INTERNET EXPLORER, why I can't see arrows to navigate through the carousel. It works on all others browsers
I have put :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE[all version here]" />
but nothing !
Actually those elements appear and disappear on Chrome too. When they're invisibile it seems something has given them explicit positions which are fighting with the logic in the original CSS. I can't find where precisely quickly because the page loads over 20 JavaScript files. I have rarely seen so much code to do so little. Screams of corporate CMS. I'm not surprised debugging this is a nightmare.