CSSexpression式

我读过的CSSexpression式被弃用,甚至不应该使用。 我从来没有听说过他们,并决定去看看。 我发现了一个代码示例,即使您滚动,屏幕上的浮点元素也保持在同一个点上。

<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. 在这种情况下使用expression式是否正确?
  3. 如果不是,我应该使用什么?
  4. 有没有其他有趣的expression可以帮助的事情?

CSSexpression式用于在较旧的IE中工作,但在IE8中完全放弃:

dynamic属性(也称为“CSSexpression式”)在Internet Explorer 8及更高版本,IE8标准模式及更高版本中不再受支持。 这个决定是针对标准符合性,浏览器性能和安全性的原因而做出的,详见IE标题为Ending Expressions的博客文章。 Internet Explorer 8中的dynamic属性在IE7模式或IE5模式下仍然可用。

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

如果不是,我应该使用什么?

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

正如@Yet Another Geek所指​​出的,你可以使用position: fixed来实现上面的例子。 IE6不支持 – CSSexpression式可能是为了解决这个问题而创build的。

为了在滚动的同时保持一个元素在同一个地方,你应该使用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> 
  1. 可能不会。 使用position:fixed或者Javascript更容易
  2. 除非你只支持IE <8。IE8 +和其他浏览器不支持*; 它不符合标准 ,不会通过validation
  3. 使用position:fixed; bottom:x; top:y; left: a; right:b; position:fixed; bottom:x; top:y; left: a; right:b; 其中x,y,a和b是偏移量。 或者,使用Javascript
  4. 再说一次,除非你只使用旧版本的IE。 真的,只是倾倒它。 JS和普通的CSS可以达到同样的效果。

*正式,反正。 显然,它在Chrome上为@DalexL工作