ie 9 browser compatibility - cross-browser

I installed ie 9 and tried to bring up my application. I could see that the css is applied properly and the page renders well. When a colleague of mine did the samething he didnt get the page correctly. All the paragraphs were looking disaligned and extra spaces and lot more issues.
On checking the browser mode and document mode of my machine by pressing F12 it was IE9 compatibility view and IE7 standards respectively. For my colleague it was IE9 for both the modes.
Questions:
1) Why is the setting different in each installation of IE9 in different machines ?
2) How to control the setting to make it uniform in all the machines ?

1) IE settings are depend on your installation and older version of IE. It's always different in each machine.
2) Just put following code in your header and your IE browser would open by default in defined compatible view.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
You can change "IE=EmulateIE9" to "IE=EmulateIE9" if you want make IE8 as default compatibility view.

Related

IE issue with compatibility modes

I was wondering when I put my browser in compatibility mode, how does it know what setting to use from the header tags found in the document. If we have logic for all versions back to EI7, will it use the furthest back? So in this case, it chooses 7 in comp mode, but if we only offered back to IE8, then it would choose IE8 for that instance? So the question is, why does IE 11 compatibility mode set it to IE7 standards according to my debugger in IE? If I remove the [if IE7] code snippet, will it then set it to IE8 standards in the browser? We just quit supporting IE7 so am why I am asking this.
[if IE 7 ]> <html class="ie7"
[if IE 8 ]> <html class="ie8"
[if IE 9 ]> <html class="ie9"
In addition, the way you view your pages also affects the document mode.
If you view a page on the Internet (or through a local web browser), the page opens in the Internet zone. In this case, the x-ua-compatible directive takes precedence; depending on the setting, the <DOCTYPE> may also have an impact.
If you open the page using the File menu, from File Explorer, or from a network path, the page opens in the Intranet zone. By default, this means your page opens in IE7 compatibility mode, though that can be changed through settings.
Apps hosting the webBrowser control default to IE7 unless you override that using a registry change. (Note, it's currently unclear whether this is supported in Windows 10).
For best results:
Use the HTML5 <DOCTYPE> directive.
Use an x-ua-compatible meta with content set to IE=edge.
View local pages through a local webbrowser.
Code for HTML5, detect features, provide graceful fallback, and worry less about individual differences between individual browsers.
Hope this helps...
-- Lance
The code you've quoted in the question does NOT tell IE what mode to use. What this code does is look at the mode that IE is already in, and react accordingly.
Therefore, the answer to your question is: No: Removing the IE7-specific block from this code will not stop IE going into IE7 mode.
If you want to force IE to go into a specific mode, the code you need to use is the X-UA-Compatible meta tag.
You need a line near the top of you HTML that looks like this:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Putting edge in the content tells IE to use it's best available mode (so IE11 will be in IE11 mode). If you want a specific IE mode, then put IE8 or similar instead of edge.

Using X-UA-Compatible to emulate IE9 in corporate setup

I have been reading up about document type emulating and compatibility mode in IE and have to say its quite a bit to get one's head around.
I have developed an App with Bootstrap 3 and Ember rendering a few pages controlled through a menu.
I tested this in all browsers, Webkit, Moz, and IE and all seemed perfect. I work in a large corporate, so when I decided to test it on some of my colleagues' computers, on IE, I got a blank page. Now I found that very strange because they were all running IE10 or IE11, although there is the odd IE9. I couldnt understand it because it renders perfectly on my IE.
So anyway, I started hitting F12 on their browsers and realised that many of them had IE7 emulating even though they were running IE10 or 11.
I read a bit about this issue, and I found the following:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
So I proceeded to add this line to my page so it is as follow:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
Now my question is this: Am I correct in assuming that if there was some sort of group policy set when using IE at work, that this workaround would solve the issue?
I will do some testing tomorrow morning, but just wanted to know if that is along the right lines?
Many people at work use Chrome and Firefox or whatever they want to, but there are obviously quite a few that use IE.
Take note that there must be a reason why the current group policy is set to enable compatibility mode (some other intranet app maybe) and that other app might stop working (or render badly) if you disabled it. If the admin have configured it in a way where that there's a Compatibility View list then you're in luck because all you need to do is not include your web app's URL into that list.
https://msdn.microsoft.com/en-us/library/ie/gg622935(v=vs.85).aspx
As for the document mode, I suggest for you to use this instead:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Setting the version to 'IE=edge' tells Internet Explorer to use the
latest engine to render the page and execute JavaScript.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible
The only reason you want to "IE=EmulateIE9" is that your app is targeting the legacy document mode which in your case it isn't since you're using the latest web frameworks out there. I assume you want the best UI experience for your users.
I understand that in your case the IE versions vary and that some might not support "IE=edge". It will be just OK because it will fallback to the highest supported document mode. For example, IE8 with IE=9, IE=Edge, or IE=EmulateIE9 results in IE8 mode.
https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx
IE uses different security zones for different types of content. Stuff from the Internet is loaded in the Internet zone. Stuff from the local network is loaded in the Intranet zone. If you go through Internet Options, you can see that there are different security settings applied to the various zones.
If you're deploying the app through the network, then your app is likely loading the app in the Intranet zone (right click the page and then choose Properties to confirm).
By default, IE loads intranet pages in compatibility view, which is the same as using EmulateIE7 as the content value for the x-ua-compatible element. This means that, absent additional tagging/changes, your app is being treated as if it were being viewed in IE7.
If you need a specific document mode, you should be able to specify that mode directly in the content value, e.g, content="ie=9". If that doesn't help, then try adding an MotW to the page, so that the page is loaded in the Internet zone. In turn, this should allow the x-ua-compatible setting to take effect.
You can also change the Compatibility View Settings, provided they're not disabled through GPO, so that Intranet pages aren't automatically loaded in compatibility view.
Hope this helps...
-- Lance

Force IE Browser Mode into Compatibility mode?

I noticed something interesting about my website. It displays correctly when I have the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9"> in IE 8 and 7, but in IE 9 and 10, it does not display correctly. However, they are seen correctly when I go to Developer Tools and set the browser mode to IE 10 or IE 9 Compatible mode.
I was wondering, is there a way you can force IE 10 or IE 9 to automatically view the page in Compatibility mode without changing the mode in Developer Tools? If so, is there a Doctype or meta tag that can do this for me? I've done some research and I've only found Doctypes that allow you to view things in only standard mode, but I haven't found any Doctype that can allow you to view something in Cmpatability mode. Any help would be appreciated! Thanks!
There’s a couple of settings in IE 8 that can cause pages to render in Compatibility Mode, regardless of the page’s HTML content or HTTP headers:
Page > Compatibility View Settings
If “Display intranet sites in Compatibility View” is checked, then IE will render all sites on the local network in compatibility view. (This has happened to me a few times during development.)
If “Include updated website lists from Microsoft” is checked, then IE will download a list of websites from Microsoft and render them all in compatibility view.
If “Display all websites in Compatibility View” is checked, then, well, you can guess what happens.
Tools > Internet Options > Advanced > Browsing
If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.
And, finally, if you navigate to a page and then click on Page > Compatibility View (or click on the compatibility view icon in the address bar), then that page will be rendered in compatibility view.
So, although it’s worth putting X-UA-Compatible in there and using a doctype like the HTML5 one (so that your intentions are clear), always check these settings first when testing.
Source: The HTML5 doctype is not triggering standards mode in IE8

How to launch a local html page in IE10 in compatibility mode?

I have a set of old html+JScript pages that are loaded from a local hard drive only. They used to work in previous versions of IE, but IE10 had something changed and it doesn't work anymore. I didn't write the code, so I don't think it's feasible to see what is broken, but it seems to work if I change IE into compatibility mode.
So I was curious, is there a command line parameter to launch IE in compatibility mode without altering the html file itself?
I think you meant to set compatibility settings to IE8, try
<meta http-equiv="X-UA-Compatible" content="IE=8" />
in head tag of html.
Under the Tools Menu bar, click on Compatibility Mode Settings. You can add all the sites where you want to run in compatibility mode there. More info here

Messed layout only in IE 7

I am coding a site in IE 9. The layout looks perfect in IE 9 and IE 8 as well as IE 6 BUT it's completely messed up in IE 7. Also, the issue is when I press the compatibility button in IE 9 - the layout is messed up beyond comprehension..My question is - how can you make the layout ok when one presses compatibilty button in IE 9. Thank you , regards !
It is quite easy to do. Put this code directly after your opening <head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
What this does is forces the browser to use the highest standards it has available to it.
All versions of Internet Explorer have different sets of rendering bugs, and the older the browser, the more bugs there are.
If you are developing a site so that it looks good in IE, you have most likely taken advantage of some of the rendering bugs. This means that it will look different in another version of IE, and it will look completely warped in any browser that better follows the web standards.
You should not take advantage of the rendering bugs, but instead avoid things that works differently in IE compared to other browsers. That way it's possible to build sites that both work in different IE versions and also in other browsers.
You should have another browser to test in also, like Firefox, Chrome or Opera. Also verifying the HTML and verifying the CSS are also good tools for finding problems with the code.
You should not bother about the compatibility button. That is for pages that can't cope with standards compliance mode. If your page renders correctly in standards compliance mode, then you can add the meta tag that disables the compatibility button.