54

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. 式が役立つ他の興味深い/役立つことはありますか?
4

3 に答える 3

65

CSS式は以前のIEで機能していましたが、IE8では完全に廃止されました。

動的プロパティ（「CSS式」とも呼ばれます）は、Internet Explorer 8以降、IE8標準モード以降ではサポートされなくなりました。この決定は、Ending ExpressionsというタイトルのIEブログエントリで詳しく説明されているように、標準への準拠、ブラウザのパフォーマンス、およびセキュリティ上の理由から行われました。動的プロパティは、IE7モードまたはIE5モードのいずれかのInternetExplorer8で引き続き使用できます。

したがって、それらをこれ以上学ぶ価値はないことは間違いありません。

そうでない場合は、何を使用すればよいですか？

ユースケースに応じて、JavaScriptまたはメディアクエリ。

@Yet Another Geekが指摘しているように、上記の例はを使用して実装できます position: fixed。IE6はそれをサポートしていません-CSS式はおそらくそれを回避するために作成されました。

于 2011-05-31T18:13:22.180 に答える
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>
于 2011-05-31T18:15:58.970 に答える
11
  1. おそらくそうではありません。使いやすいposition:fixedか Javascript
  2. IE < 8 のみをサポートしている場合を除き、そうではありません。IE8+ およびその他のブラウザーではサポートされていません*。標準に準拠しておらず、検証に合格しません
  3. x position:fixed; bottom:x; top:y; left: a; right:b;、y、a、および b はオフセットです。または、Javascript を使用する
  4. 繰り返しますが、古いバージョンの IE のみを使用している場合を除きます。本当に、ただ捨ててください。JS と通常の CSS で同じ効果が得られます。

*とにかく、公式に。どうやら @DalexL の Chrome で動作したようです

于 2011-05-31T18:17:14.143 に答える