CSS positioning with IE8 - expressions not supported_问答_开发者

CSS positioning with IE8 - expressions not supported

开发者 https://www.devze.com 2023-01-18 15:17 出处：网络

I have the following code: <html> <head> <style type=\"text/css\"> DIV#left { z-index: 100;

I have the following code:

<html>
<head>
<style type="text/css">
DIV#left
{
z-index: 100;
position:absolute;
left:0px;
top:0px;
width: 100px;
height: 100px;
background-color: #e7e7e7;
}
DIV#right
{
z-index: 100;
position:absolute;
left:100px;
top:0px;
width: 100px;
height: 100px;
background-color: #e20074;
}
</style>
</head>

<body>
<div id="left">
1
</div>
<div id="right">
2开发者_高级运维
</div>
</body>

</html>

But I need the right div section to be expanded to the end of the page (width=100%) So here is how I changed the width for DIV#right:

width: expression(parseInt(document.body.offsetWidth)-100);

Unfortunately, this doesn't work with IE any more! IE8 and firefox ignore expressions. How can I overcome this issue?

Many thanks in advance!

You shouldn't use CSS expressions like that - they're slow, old, and most importantly, proprietary, meaning it won't work on anything other than IE.

Here's a simple solution that works on Firefox, IE8 and IE7 [but not IE6 though]: Give the right div a right: 0 to force the div to expand out all the way to the end of the page:

#right {
    position: absolute;
    left: 100px;
    top: 0;
    right: 0;
    height: 100px;
}

See: http://jsfiddle.net/hEeVY/

If you're using expressions for anything, it's probably better off to use Javascript to achieve the same effect.

Yes, CSS Expressions are slow, they affect performance. Along with they they compromise with security as well. Solution specified by Yi Jiang must work.

Now all browsers will go on same terms. To know more on why Expressions were dropped please check http://techbookshelf.blogspot.in/2012/11/css-expressions-in-ie8-and-higher.html