54

我在某处读到 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>

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

所以...

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

3 回答 3

65

CSS 表达式曾经在较旧的 IE 中工作，但在 IE8 中已完全放弃：

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

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

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

根据用例，JavaScript 或媒体查询。

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

于 2011-05-31T18:13:22.180 回答
15

为了在滚动时将元素保持在同一个位置，您应该使用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>
于 2011-05-31T18:15:58.970 回答
11
  1. 可能不是。它更容易使用position:fixed或 Javascript
  2. 除非你只支持 IE < 8。IE8+ 和其他浏览器不支持它*；它不符合标准，不会通过验证
  3. 使用position:fixed; bottom:x; top:y; left: a; right:b;其中 x、y、a 和 b 是偏移量。或者，使用 Javascript
  4. 同样，除非您仅使用旧版本的 IE，否则不会。真的，扔掉它。使用 JS 和普通的 CSS 可以达到相同的效果。

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

于 2011-05-31T18:17:14.143 回答