Search code examples
cssinternet-explorer-11css-expressions

Css Expression not working in IE11


We developed a application with older Version of IE7.

And the code contains "CSS expression" but this not working in IE11.

Sample code :

div#GridViewContainer
        {
            position: relative !important;
            width: 1000px !important;
            overflow: auto !important;
        }
        _:-ms-fullscreen, :root .staticHeader
        {
            position: relative !important;
            top: expression(this.offsetParent.scrollTop);
            z-index: 99 !important;
        }
        _:-ms-fullscreen, :root .StaticColumn
        {
            z-index: 90 !important;
            border: 1px solid gray !important;
            position: relative !important;
           left: expression(document.getElementById("GridViewContainer").scrollLeft);
        }

How to make work in IE11 and alternative way to do this?

How alter my code?


Solution

  • OR

    • If you are feeling lazy or dont want to use JS, try setting the Document mode:

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

      add it to the <head>...</head> section.

      Note that this can possibly break the properties not supported by IE7 that you may have used.


    Why you should avoide using CSS Expressions:

    Starting with Internet Explorer 11, CSS expressions are no longer enabled for webpages loaded in the Internet zone. CSS expressions are supported for pages loaded in other zones (such as the intranet zone) when pages are rendered in IE7 standards mode or IE5 quirks mode.

    -CSS expressions no longer supported for the Internet zone

    Also,

    Unfortunately, the performance penalty imposed by CSS expressions is considerable, as the browser reevaluates each expression whenever any event is triggered, such as a window resize, a mouse movement and so on. The poor performance of CSS expressions is one of the reasons they are now deprecated in IE 8. If you have used CSS expressions in your pages, you should make every effort to remove them and use other methods to achieve the same functionality

    -Page Speed: Avoid CSS expressions (deprecated)

    Conditional Comments should somewhat work as suggested by Leo Caseiroin in his answer, it will actually save you some bandwidth on IE7+.