html-CSS表达式

我在某处读到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. 表达式还可以提供其他有用的帮助吗?
Freesnöw asked 2020-02-20T20:39:45Z
3个解决方案
60 votes

CSS表达式曾经在较旧的IE中起作用,但在IE8中已被完全废弃:

Internet Explorer 8和更高版本,IE8标准模式和更高版本不再支持动态属性(也称为“ CSS表达式”)。 做出此决定是出于标准合规性,浏览器性能和安全性原因,如IE博客标题为“结尾表达式”中所述。 动态属性在IE7模式或IE5模式下的Internet Explorer 8中仍然可用。

因此,可以说不再值得进一步学习。

如果没有,我应该怎么用?

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

正如@Yet Another Geek指出的那样,您可以使用position: fixed来实现以上示例。IE6不支持该示例-CSS表达式可能是为解决此问题而创建的。

Pekka 웃 answered 2020-02-20T20:52:25Z
15 votes

为了在滚动时将元素保留在同一位置,应使用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>
Yet Another Geek answered 2020-02-20T20:52:50Z
11 votes
  1. 可能不会。 使用position:fixed; bottom:x; top:y; left: a; right:b;或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

Thomas Shields answered 2020-02-20T20:53:28Z
translate from https://stackoverflow.com:/questions/6191679/css-expressions