none
IE 11: How to set compatibility in my web Page?

    Question

  •  

       my page runs well, if I switch IE 11 to compatibility mode. (by adding the url to the new dialog).
    But I want to set the mode in the code of my page. In IE 10 worked: 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" > 
    In IE 11 it does not. 
    Are there any other possibilities?
    Thanks,
    Marco
    Wednesday, September 18, 2013 3:41 PM

All replies

  • Hi,

    what makes you think

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

    does not work in IE11?

    the IE11 Developer tool no longer displays the Browser Mode or Document Mode of the current page in its toolbar, but you can query the navigator.userAgent, document.documentMode and document.compatMode from the Developer Tool's console

    or

    Add a small test button to your page that displays those values.

    function ShowProperties(){

    var msg='document.documentMode=' + document.documentMode + ' \n';

    msg+='document.compatMode=' + document.compatMode + '\n';

    msg+='userAgent=' + navigator.userAgent;

    alert(msg);

    }

    The latest update of IE11 Preview includes console warnings when the document Compatibility Mode is established (as in previous versions)

    f12>Console tab, refresh the page to show suppressed errors and warnings.

    To view any server header x-ua settings, use the Networking tab of the Developer tool to view the details of the response header.

    Regards.


    Rob^_^

    Thursday, September 19, 2013 2:03 AM
  • Hi Rob,

    thanks a lot for your anwser.

    sorry, my mistake: my pages write the X-UA-Compatible line only if Request.Browser.IsBrowser("IE") is true.

    But it seems IE 11 ist not an IE anymore....

    The layout ist still different if I choose "compatibility mode" in the IE menu, and the IE hungs on my page without it, but I still have to figure out why.

    Best regards,

    Marco

    Thursday, September 19, 2013 9:49 AM
  • so, to ask my question clearer:

    If I switch to compatibility mode in the new dialog everything works fine. What should I write into my page source to get exactly this setting?

     

    Thursday, September 19, 2013 10:41 AM
  • Hi Marco,

    If I switch to compatibility mode in the new dialog everything works fine. What should I write into my page source to get exactly this setting?

    You could add the x-ua meta IE=EmulateIE7 or response header.... this will force 'Compatibility View" - that is 'Near Standards' view...a rendering mode that was first introduced with IE7 that uses hasLayout to differentiate layout set by depreciated presentational attributes (height, width, align...) and send the IE7 userAgent string to the server and set the navigator.userAgent string to IE7's

    see Defining Document Compatibility

    You could also specify EmulateIE8, EmulateIE9, EmulateIE10.. depending what 'features' you want to implement on your page.

    However, in later IE versions(>7) this will limit the css and javascript features that later versions will use when your page is viewed in Compatibility View...

    the correct answer to your question is...

    Use a valid document type declaration (the system dtd <!doctype html> is recommended)

    Validate and correct your markup to enable all versions of all browsers to use the most standards method of rendering they are capable of...replace your legacy presentational attributes (that the w3c validator will report as errors) with style rules... (separation of markup, css and scripting)

    Remove any client side or server side Browser sniffing dependencies and use 'feature testing instead' - the simplest way to do this is to include modernizer.js with your scripts.

    Request.Browser.IsBrowser("IE") is true.

    IE11 Preview uses a new userAgent String (by default)

    see Compatibility changes in IE11 Preview

    Avoid using request.browser.IsBrowser('IE')..... as the above link will explain.


    Rob^_^

    Friday, September 20, 2013 2:34 AM
  • Thanks Rob,

    there must be something different. If I use the browser compatibility mode, my page works fine.

    If I don't use it and put just the meta tag in the head, the IE hangs. (there are some IFrames, XMLHttpRequests etc. on he page). - I attached both screens. - For now I have to implement a message "please turn on compatibility mode or use an other browser" for IE 11.

    I hope there will be a fix soon.

    Regards,

    Marco

    Friday, September 20, 2013 12:25 PM
  • Hi,

    1. Check your Compatibility View settings... Tools>Compatibility View settings, do you have "Display intranet sites in Compatibility View" checked?

    2. check which IE Security zone your page maps to (File>Properties menu from IE)..It looks like you may be developing and testing your service on a server version of Windows? Test from a client instead.... server versions of windows/Ie have enhanced security ... your typical user will not be using server versions of windows. Additionally, the first step in troubleshooting IE issues is to test in noAddons mode...normally server versions of IE are left bare-bones.

    or

    3. F12>Console tab, .... refresh you page to show any suppressed error messages...

    Hopefully your version of IE11 preview will show where and how Compatibility View is being set....

    It should also show a warning if a page restart was triggered (which interns raises the Information bar message "the webpage was recovered"

    see this link http://msdn.microsoft.com/en-us/library/ie/hh772173(v=vs.85).aspx

    for tips on using the Developer tool console to debug you web apps.

    type

    document.documentMode

    to return the documentMode that your page is rendering in.

    navigator.platform

    to return what bit-ness it is using (IE11 defaults with Enhanced Protected Mode... pages can render with the x86 or x64 engines... this affects what ActiveX controls the page can support (x86 or x64)

    .... that's about the best I can come up with...your screen shots don't provide many clues.. Ideally a web link for us to test is helpful, but it looks like that is not possible in your case?

    Regards.


    Rob^_^

    Saturday, September 21, 2013 1:24 AM
  • Hi Rob,

    1. yes, If I set it - my page works fine (screen 2), if I don't set it, IE hungs

    2. Client is Windows 8.1 (RTM from MSDN), Server is a different machine in the intranet, Win 2003 Server

    3. I can't press F12 without compatibility mode because IE hungs completely. If I use compatibility mode, I can use F12 and no errors occur.

    >> It should also show a warning if a page restart was triggered (which interns raises the Information bar message "the webpage was recovered"

    yes, I get this message 

    I'll try to provide a web link on monday.

    Have a nice weekend,

    Marco



    • Edited by MGerlach1 Saturday, September 21, 2013 5:02 AM
    Saturday, September 21, 2013 5:01 AM
  • Hi,

    Page hangs are usually caused by COM extensions... even your anti-virus addons? Try testing in no addons mode first.

    ...thinking...thinking... probably your are using behaviors... pngfix.js?

    (.. possibly its your display drivers.. (if its working on other machines)... do a dxdiag to check... (Start>Run>dxdiag )

    ... do you have a valid Document type declararation on that page..

    IE10 and 11 no longer support behaviors...IE10 introduced IE10 Quirks Mode.... (other browsers call this mode Near Standards Mode).... IE10 and later render a page that has no document type declaration (or an invalid one) with document.documentMode==edge and document.compatMode==BackCompat

    Basically it allows legacy pages (Quirks documents... without a DTD..) to use the latest feature sets (CSS 5 and HTML5) that the browser is capable of...

    I will wait until you can provide a snippet or link... to give you some suggested workarounds... my answer will depend upon if you are using behaviors or DirectX in your css... and what Document type declaration you are using (If any)

    regards.


    Rob^_^

    Sunday, September 22, 2013 4:50 AM
  • Hello Rob,

    seems to be some kind of a timing problem.

    If have the same client (IE11 on Win8.1) - if I open the page in the intranet, IE freezes. if I switch IE to compatibility, it works.

    If I call the same page on the Internet, both modes work. No freeze.

    The link would be: http://hosting4.myfactory.com/myfactory5/ User: rob, Pwd: rob

    I think, I'll have to run more tests to get an idea, what goes wrong.

    Best regards,

    Marco

    Tuesday, September 24, 2013 3:36 PM
  • Hi,

    well... it took a bit of trickery to get the IE Developer tool to display in a hosted VM modal full screen window.(use f12 instead of the Tools menu or context menu to display the Developer tool).. but...

    it tells me that you are targeting IE5.... and I see that you have placed the x-ua IE=9 on the page.... try replacing the x-ua IE=9 with IE=5... this however may not be suitable for IE10/11 touch enabled devices.....

    first, can you remove the oncontextmenu event handler in the body tag so I can properly debug the application...

    Your goal should be to replace the legacy markup and script (that is targeting Quirks mode...)

    Ideally you want to end up with a standards compliant HTML5 document that separates markup, css and script (viz...a valid document type declaration, no inline styles or event handlers, and no IE x-ua meta or response headers)


    Rob^_^

    Hi again....

    replace

    <HTML style="width:100%; height:100%">
      <HEAD>
     <LINK href="../../../css/wfStyleMenu.css" type="text/css" rel="stylesheet" >
     <LINK href="../../../css/wfStyleDefault.css" type="text/css" rel="stylesheet" >
     <LINK href="../../../css/wfStyleDialogTable.css" type="text/css" rel="stylesheet" >

     <TITLE>myfactory.BusinessManager</TITLE>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >

    with

    <HTML style="width:100%; height:100%">
      <HEAD>

    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=5" >

     <LINK href="../../../css/wfStyleMenu.css" type="text/css" rel="stylesheet" >
     <LINK href="../../../css/wfStyleDefault.css" type="text/css" rel="stylesheet" >
     <LINK href="../../../css/wfStyleDialogTable.css" type="text/css" rel="stylesheet" >

     <TITLE>myfactory.BusinessManager</TITLE>
     

    Note: the x-ua meta comes first after the content type meta.... You REQUIRE IE=5 because your markup, script and css is not standards compliant...

    If you want to future proof your app or make it interoperable across other browsers you will need to add the html5 dtd (<!doctype html>), validate and correct your markup and separate your css and script (inline event handlers)

    Tuesday, September 24, 2013 8:15 PM