I have some static HTML pages for a mockup design. The HTML pages are working perfectly standalone in ie8, ie9, chrome, mozila and safari.
When I deploy them onto the server(WCS) for intranet development, it is not aligned properly only in IE8 but they display correctly in other browsers including ie9.
I have two questions:
I think I don't have CSS issues if I have that CSS issues it does not
work in the standalone pages also in ie8. Am I correct?
Do I need to give any X-UA-Compatible setting to IE=edge from
server side???
I would always choose a X-UA-Compatible value of IE=edge,chrome=1
This way you always get the latest rendering engine in IE and are future save, if you are wise.
If you see, that some things don't work in IE8 you should use modernizr and/or polyfills. You have to google these because I cannot describe them in detail here.
In your case thare will be many possible answers
Sometimes Browsers behave differently when displaying a local file (protocol file://) or a webserver document (protocol http://)
Do you have default setting of X-UA-Compatible as HTTP header on your webserver (inspect with Firefox Firebug, Net tab)
Is the Compatibility mode broken (See if you have a torn apart page symbol in your IE8/9 address field, see here: http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/features/compatibility-view)
Else you will have a CSS issue.
Related
I would like to ask, why IE11 does not displays border-radius, justify-content and align-items in my project.
When I create new .html page these tags are supported. But not in my project. Can you please help me how to solve it? Mozilla Firefox display it right and the DOM explorer gives me no error messages.
Internet Explorer 10 and 11 use a squiggly red underline to indicate invalid rules.
Obviously, these are valid rules so referencing this article by John Schneider
When I looked at the CSS styles in use on the page in IE11’s built-in F12 developer tools, I noticed that the border-radius property on my form’s enclosing div was present, but it was missing its enable/disable checkbox, and the name of the style was shown with a red squiggle underline, as though IE didn’t recognize it. It seemed almost as though IE11 was behaving like a legacy browser that didn’t recognize that newer CSS property.
In fact, that did turn out to be exactly the problem. IE11 was rendering the form (running on my local IIS) with its legacy “Compatibility View” engine, which it is by default configured to do for intranet sites. (Oddly, my IE11 was not using Compatibility View to render another copy of the form that I was trying to use to debug the issue that I had IE loading via the “localhost” domain, which had me confused for a while.)
The solution was to disable IE11’s Compatibility View for intranet sites by doing Setting (gear icon) > Compatibility View Settings > uncheck “Display intranet sites in Compatibility View” checkbox. Making that configuration change immediately got IE11 to start rendering the page properly.
Your browser may be in compatibility mode to an older browser.
Press F12 - and check which version it's using.
my html/css works fine with chrome, FF and IE11. Also with IE8 when loaded locally from my harddrive.
When the same files are located in an networkdrive the css seems not to work properly. Colors and fonts are fine, but some div-containers are displayed at the wrong positions.
When i transport the files in the htdocs of an apache fonts and colors are fine, but other problems occur with the positioning. Strangly not the same as when started from the networkdrive. Some divs are now correct, others ar now misplaced.
I´m not able to find any pattern with this.
I can check the behaviour within ff and chrome with the build-in dev-tools. But i don´t know of any similar tool within IE8.
Any idea for my 1001 attemp to fix the problem?
Thanks a lot!
Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in Local Intranet
security zone, it will be rendered in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.
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
I am developing an HTML application and I was originally targeting IE7 because half of the company still had that particular version. They just upgraded to IE8 this week and I'm trying to get rid of any IE7 specific code.
One thing I noticed while using the IE developer tools is that when I view the home page on my local server, the Document Mode is set to IE8 Standards. If I view the same exact code base on my test server, it defaults to IE7 standards:
This is what I see when I look at developer tools on each server:
http://localhost:12345/
Browser Mode: IE8
Document Mode: IE8 Standards (Page Default)
http://webtest01/
Browser Mode: IE8 Compat View
Document Mode: IE7 Standards (Page Default)
What is causing them to be different on different servers?
EDIT
I think it is because Internet Explorer has a setting to display Local Intranet sites in Compatibility View. Is there a tag I can use to override this for my site?
IE is puts webtest01 in the Local Intranet Zone, which forces IE8 Compat browser mode/IE7 mode document mode.
I believe you can add a X-UA-Compatible HTTP header (or <meta> tag, so long as it's the first tag in your head), which should get the document mode into IE8 standards, but cannot fix browser mode, which has subtle implications for scripts.
To get IE out of compatibility browser mode, You have to go to Internet Options > Sercurity > Local Intranet > Sites and make sure everything is unchecked, or go to Tools > Compatibilty View Options and uncheck Display intranet sites in Compatibility View.
I have just installed IE9 beta and on a specific site I created (HTML5) IE9 jumps to compatibility mode unless I manually tell it not to. I have tried removing several parts of the website but no change. Including removing all CSS includes. On some other website of me it goes just fine.
Also, don't set it manually because then IE9 remembers the user setting and you can't turn it back to automatic (or at least I haven't found how, not even via private browsing and emptying cache)
Anyway. The site where it jumps to compatibility mode: http://alliancesatwar.com/guide/
One where it renders correct: http://geuze.name/basement/ (I can't post more than 1 hyperlink)
Both use the same doctype and all. Those sites have a lot in common(apart from appearance) using the same basic template(encoding, meta tags, doctype and the same javascript)
It would be great if someone has an answer for me! An HTML5 website that renders in IE7-mode is pretty... lame.
Works in IE9 documentMode for me.
Without a X-UA-Compatible header/meta to set an explicit documentMode, you'll get a mode based on:
whether the user has clicked the ‘compatibility view’ button in that domain before;
perhaps also whether this has happened automatically due to some other content on the site causing IE8/9's renderer to crash and fall back to the old renderer;
whether the user has opted to put all sites in compatibility view by default;
whether IE thinks the site is on your intranet and so defaults to compatibility view;
whether the site in question is in Microsoft's own list of websites that require compatibility view.
You can change these settings from ‘Tools -> Compatibility view settings’ from the IE menu. Of course that menu is now sneakily hidden, so you won't see it until you press Alt.
As a site author, if you're confident that your site complies to standards (renders well in other browsers, and uses feature-sniffing to decide what browser workarounds to use), I suggest using:
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
or the HTTP header:
X-UA-Compatible: IE=Edge
to get the latest renderer whatever IE version is in use.
I put
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
first thing after
<head>
(I read it somewhere, I can't recall)
I could not believe it did work!!
To force IE to render in IE9 standards mode you should use
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Some conditions may cause IE9 to jump down into the compatibility modes. By default this can occur on intranet sites.
I've posted this comment on a seperate StackOverflow thread, but thought it was worth repeating here:
For our in-house ASP.Net app, adding the "X-UA-Compatible" tag on the web page, in the web.config or in the code-behind made absolutely no difference.
The only thing that worked for us was to manually turn off this setting in IE8:
(Sigh.)
This problem only seems to happen with IE8 & IE9 on intranet sites. External websites will work fine and use the correct version of IE8/9, but for internal websites, IE9 suddenly decides it's actually IE7, and doesn't have any HTML 5 support.
No, I don't quite understand this logic either.
My reluctant solution has been to test whether the browser has HTML 5 support (by creating a canvas, and testing if it's valid), and displaying this message to the user if it's not valid:
It's not particularly user-friendly, but getting the user to turn off this annoying setting
seems to be the only way to let them run in-house HTML 5 web apps properly.
Or get the users to use Chrome. ;-)
The site at http://www.HTML-5.com/index.html does have the X-UA-Compatible meta tag but still goes into Compatibility View as indicated by the "torn page" icon in the address bar. How do you get the menu option to force IE 9 (Final Version 9.0.8112.16421) to render a page in Standards Mode? I tried right clicking that torn page icon as well as the "Alt" key trick to display the additional menu options mentioned by Rene Geuze, but those didn't work.
As an aside on more modern websites, if you are using conditional statements on your html tag as per boilerplate, this will for some reason cause ie9 to default to compatibility mode. The fix here is to move your conditional statements off the html tag and add them to the body tag, in other words out of the head section. That way you can still use those classes in your style sheet to target older browsers.
Looks fine to me:
You're sure you didn't on the settings globally or something? This is a clean installation of the beta on Windows 7. The developer tools report that the page is defaulting to IE9 Standard Mode.
I recently had to resolve this issue and here's what I did :
First of all, this solution is around tuning Apache server.
Second main think is that there's a bug in the IE9 which means that the meta tag will not work, instead of this solution try this
find/open your httpd.conf
uncomment/or add the following line
LoadModule headers_module modules/mod_headers.so
add the following lines
<IfModule headers_module>
Header set X-UA-Compatible: IE=EmulateIE8
</IfModule>
save/restart your Apache server,
browse to your page with IE9, use tools like wireshark or fiddler or use IE developer tools to check the header is there