Html CSS 表达式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6191679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Expressions
提问by Freesn?w
I read somewhere that CSS Expressions were deprecated and shouldn't even be used. I had never heard of them and decided to take a look. I found a code example that kept a floating element in the same spot on the screen, even if you scrolled.
我在某处读到 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>
This reminded me of the sites that had the "share bars" and stuff at the bottom of their pages.
这让我想起了在页面底部有“共享栏”和内容的网站。
So...
所以...
- Is this how they are doing it?
- Is it alright to use Expressions in this situation?
- If not, what should I use?
- Are there any other interesting/helpful things that expressions can help with?
- 这是他们的做法吗？
- 在这种情况下可以使用表达式吗？
- 如果没有，我应该使用什么？
- 表达式还有什么其他有趣/有用的东西可以帮助吗？
回答by Pekka
CSS expressions used to work in older IE's, but they have been completely abandoned in IE8:
CSS 表达式曾经在较旧的 IE 中工作，但在 IE8 中已完全放弃：
Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons, as detailed in the IE blog entry titled Ending Expressions. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode.
Internet Explorer 8 及更高版本、IE8 标准模式及更高版本不再支持动态属性（也称为“CSS 表达式”）。这个决定是出于标准合规性、浏览器性能和安全原因，如标题为结束表达式的 IE 博客条目中所述。IE7 模式或 IE5 模式下的 Internet Explorer 8 中的动态属性仍然可用。
So it's arguably not really worth learning them any more.
因此，可以说不再值得学习它们。
If not, what should I use?
如果没有，我应该使用什么？
Depending on the use case, JavaScript or media queries.
根据用例，JavaScript 或媒体查询。
As @Yet Another Geek notes, your above example can be implemented using position: fixed. IE6 doesn't support that - the CSS expression was probably created to work around that.
正如@Yet Another Geek 指出的那样，您上面的示例可以使用 position: fixed. IE6 不支持 - CSS 表达式可能是为了解决这个问题而创建的。
回答by Yet Another Geek
For keeping an element in the same place while scrolling you should use the position:fixedproperty and then use top,bottom,left and right properties to tell where it should be positioned.
为了在滚动时将元素保持在同一位置，您应该使用position:fixed属性，然后使用 top、bottom、left 和 right 属性来告诉它应该放置在哪里。
EDIT: Here how it should be for your example:
编辑：这里应该是你的例子：
<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>
回答by Thomas Shields
- Probably not. It's easier to use
position:fixedor Javascript - Not unless you're only supporting IE < 8. IE8+ and other browsers don't support it*; it's not standards compliantand won't pass validation
- Use
position:fixed; bottom:x; top:y; left: a; right:b;where x, y, a, and b are offsets. Or, use Javascript - Again, not unless you're using old versions of IE only. Really, just dump it. the same effects can be achieved with JS and normal CSS.
- 可能不是。更容易使用
position:fixed或 Javascript - 除非你只支持 IE < 8。IE8+ 和其他浏览器不支持它*；它不符合标准，也不会通过验证
- 使用
position:fixed; bottom:x; top:y; left: a; right:b;其中 x、y、a 和 b 是偏移量。或者，使用 Javascript - 同样，除非您仅使用旧版本的 IE，否则不会。真的，扔了就行了。使用 JS 和普通 CSS 可以实现相同的效果。
*Officially, anyways. Apparently it worked on Chrome for @DalexL
*官方，无论如何。显然它适用于@DalexL的Chrome
