How to Replace CSS Expressions

问题:

I have an old ASP web application for Time Sheet entry which is riddled with CSS expressions. They appear in the CSS file:

.ApptPage {
    position            : relative;
    height              : expression(Math.max(document.body.offsetHeight-this.offsetTop-document.body.marginTop,0));
    border              : 0 solid black;
}

and in the ASP:

<IFRAME SRC="TimeSheetView.asp?<%=sQueryStandard%>" id=frameContent style="border-left:0;position:absolute;top:0;width:expression(Math.max(0,divContent.offsetWidth-20));height:expression(Math.max(0,divContent.offsetHeight-this.offsetTop));border:0px;left:0px;"></IFRAME>

The application works fine for IE but after over 10 years of use we want to make it ready for the next 10 years and make it browser agnostic.

This was the first time I ever saw an expression in CSS and I am at a loss for finding a way to replace it? Does anyone have a suggestion?

回答1:

These expressions were specific to IE, but they are deprecated and abandoned, even by IE:

Ref: http://msdn.microsoft.com/en-us/library/ms537634%28v=vs.85%29.aspx

As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 (Quirks) mode or IE7 Standards mode.

and

Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher.

You can use JavaScript or CSS or a combination of both to achieve what these expressions are doing.

回答2:

I'm not sure what/how exactly the expressions calculate, but I solved a similar problem (i.e. I needed dynamic heights) a while ago with the help of the descriptions and examples given on http://help.dottoro.com/. Just enter the terms (offsetWidth, offsetHeight, offsetTop, marginTop) one by one in the search field and hit Enter.

You should have a working knowledge of javascript, though. Because that is what you have to use to replace these expressions. There are developments on the CSS front regarding dynamic dimensions, but those styles are not supported by IE7-9, so that is no use.

回答3:

In IE11, dynamic CSS using expression is not supported. Now, there are two things you can do.

• Change height of a specific element

  var singleElement = document.getElementById("yourElement");
  if (singleElement)
   singleElement.style.height =
            Math.max(document.body.offsetHeight-this.offsetTop-document.body.marginTop,0) + "px";
  

• Change the 'height' value of all elements which use the class

  var allElements = document.getElementsByClassName("ApptPage");
  //Now loop through 'allElements' and set singleElement.style.height