Question

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

这让我想起了网页底部有“共享栏”和内容的网站。

因此...

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

Answer 1

CSS表达式曾经用于较旧的IE，但它们一直是completely abandoned in IE8:

在IE8标准模式及更高版本中，Internet Explorer 8及更高版本不再支持动态属性（也称为“CSS表达式”）。此决定是针对标准合规性，浏览器性能和安全性原因做出的，详见IE博客文章“Ending Expressions”。在IE7模式或IE5模式下，Internet Explorer 8中仍可使用动态属性。

所以可能不值得再学习它们了。

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

取决于用例，JavaScript或media queries。

正如@Yet另一个Geek所说，上面的例子可以使用position: fixed来实现。 IE6不支持 - 可能会创建CSS表达式来解决这个问题。

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

Answer 3

可能不是。使用position:fixed或Javascript
除非您只支持IE＆lt; 8. IE8 +和其他浏览器不支持*; 它不符合标准并且不会通过验证
使用position:fixed; bottom:x; top:y; left: a; right:b;，其中x，y，a和b是偏移量。或者，使用Javascript
同样，除非您仅使用旧版本的IE。真的，只是转储它。使用JS和普通CSS可以实现相同的效果。

*正式，无论如何。显然它适用于@DalexL的Chrome浏览器

CSS表达式

3 个答案: