Fre*_*nöw 48 html css css-expressions
我在某处读过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>
Run Code Online (Sandbox Code Playgroud)
这让我想起了网页底部有"共享栏"和内容的网站.
所以...
Pek*_*ica 61
CSS表达式曾经在旧的IE中工作,但它们在IE8中已被完全抛弃:
在IE8标准模式及更高版本中,Internet Explorer 8及更高版本不再支持动态属性(也称为"CSS表达式").此决定是针对标准合规性,浏览器性能和安全性原因做出的,详见IE博客文章"Ending Expressions".在IE7模式或IE5模式下,Internet Explorer 8中仍可使用动态属性.
所以它可能不值得学习它们.
如果没有,我应该使用什么?
根据用例,JavaScript或媒体查询.
正如@Yet Another Geek所说,上面的例子可以使用 position: fixed
.IE6不支持 - 可能会创建CSS表达式来解决这个问题.
Yet*_*eek 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>
Run Code Online (Sandbox Code Playgroud)
Tho*_*lds 11
position:fixed
或Javascriptposition:fixed; bottom:x; top:y; left: a; right:b;
其中x,y,a和b是偏移.或者,使用Javascript*正式,反正.显然它适用于@DalexL的Chrome