CSS 表达式答案

【问题标题】：CSS ExpressionsCSS 表达式
【发布时间】：2026-01-27 10:45:02
【问题描述】：

我在某处读到 CSS 表达式已被弃用，甚至不应该使用。我从来没有听说过他们，所以决定去看看。我找到了一个代码示例，它可以在屏幕上的同一位置保留一个浮动元素，即使您滚动也是如此。

<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

这让我想起了网页底部有“分享栏”之类的网站。

所以...

他们是这样做的吗？
在这种情况下可以使用表达式吗？
如果没有，我应该使用什么？
还有什么其他有趣/有用的事情可以通过表达式来帮助解决吗？

【问题讨论】：

首先，只有 IE 能理解它们。
Google Chrome 另有说明 ;) 代码 sn-p 在我的 Google Chrome 浏览器中运行良好。
JavaScript 比 css 表达式更加灵活和无处不在
我们可以使用它们来模拟在旧 IE 浏览器中使用 css expression 语法对 calc 的支持。
旧的行为应该是什么？

标签： html css css-expressions

【解决方案1】：

CSS 表达式曾经在旧版 IE 中工作，但它们一直是 completely abandoned in IE8:

Internet Explorer 8 及更高版本、IE8 标准模式及更高版本不再支持动态属性（也称为“CSS 表达式”）。这一决定是出于标准合规性、浏览器性能和安全原因，如标题为 Ending Expressions 的 IE 博客条目中所述。在 IE7 模式或 IE5 模式下，Internet Explorer 8 中的动态属性仍然可用。

因此，可以说不再值得学习它们了。

如果没有，我应该使用什么？

取决于用例，JavaScript 或 media queries。

正如@Yet Another Geek 所说，您上面的示例可以使用position: fixed 来实现。 IE6 不支持这个 - CSS 表达式可能是为了解决这个问题而创建的。

【讨论】：

结束表达式博客条目的链接：blogs.msdn.microsoft.com/ie/2008/10/16/ending-expressions

【解决方案2】：

为了在滚动时将元素保持在同一位置，您应该使用 position:fixed 属性，然后使用 top、bottom、left 和 right 属性来确定它应该定位的位置。

编辑：这里应该是你的例子：

<html>
<style>
#fixed {
position:fixed;
left:10px;
top: 50px;
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

【讨论】：

【解决方案3】：

可能不会。使用 position:fixed 或 Javascript 更容易
除非您只支持 IE 它不符合标准并且不会通过验证
使用position:fixed; bottom:x; top:y; left: a; right:b;，其中x、y、a 和b 是偏移量。或者，使用 Javascript
同样，除非您只使用旧版本的 IE，否则不会。真的，扔掉它。使用 JS 和普通的 CSS 可以达到相同的效果。

*官方，无论如何。显然它适用于 @DalexL 的 Chrome

【讨论】：