IE8 的 CSS 定位 - 不支持表达式答案

【问题标题】：CSS positioning with IE8 - expressions not supportedIE8 的 CSS 定位 - 不支持表达式
【发布时间】：2013-02-09 01:41:59
【问题描述】：

我有以下代码：

<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>

但我需要将右侧的 div 部分扩展到页面末尾（宽度=100%）所以这就是我如何更改 DIV#right 的宽度：

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

不幸的是，这不再适用于 IE！ IE8 和 firefox 忽略表达式。我该如何克服这个问题？

非常感谢！

【问题讨论】：

哦不，现在你必须以正确的方式设计网页！

标签： html css internet-explorer internet-explorer-8

【解决方案1】：

您不应该使用这样的 CSS 表达式 - 它们很慢、很陈旧，而且最重要的是，它们是专有的，这意味着它不能在 IE 以外的任何东西上工作。

这里有一个适用于 Firefox、IE8 和 IE7 [但不适用于 IE6] 的简单解决方案：给正确的 div 和 right: 0 以强制 div 一直展开到页面末尾：

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

见：http://jsfiddle.net/hEeVY/

如果您对 anything 使用表达式，最好使用 Javascript 来实现相同的效果。

【讨论】：

@wa_liu 不，我看不到 - 代码游乐场的东西只有你才能看到，因为它没有保存。如果您需要向我展示任何内容，可以尝试使用 jsfiddle。

【解决方案2】：

是的，CSS 表达式很慢，它们会影响性能。与他们一起，他们也在安全方面妥协。蒋毅指定的解决方案一定行得通。

现在所有浏览器都将使用相同的条件。要了解更多关于表达式被删除的原因，请查看http://techbookshelf.blogspot.in/2012/11/css-expressions-in-ie8-and-higher.html

【讨论】：

欢迎来到 Stack Overflow！感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。