IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

IE6_html/css_WEB-ITnoseでposition:fixed効果を実現する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:41 AM

IE6 でposition:fixed 効果を実現する方法:
推奨: 可能な限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
IE6 はposition:fixed をサポートしていないため、多くの優れた効果を実現することはできません。ただし、IE6 でこの効果を実現する方法を紹介する例を示します。コード例は次のとおりです。

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">body{  margin:40px;  padding:0px;  border:1px solid blue;}.first{  width:300px;  height:600px;  border:1px solid red;  margin:20px;}.first .fixed{  width:100px;  height:100px;  background-color:black;  position:fixed;  _margin-top:20px;  _position:absolute;  _top:expression(eval(document.documentElement.scrollTop));  left:20px;  top:20px;}</style></head><body><div class="first">  <div class="fixed"></div></div></body></html>

上記のコードは、IE6 およびその他の主流ブラウザと互換性があります。この効果を実現するためのコアコードは次のとおりです。

_top:expression(eval(document.documentElement.scrollTop));

注: 上記のコード行を追加すると、先頭にIE6では機能が無効になっているため、_margin-topを追加してください。
上記のコードは目的の機能を実現していますが、スクロールバーをドラッグすると揺れが発生するという問題がまだあります。コードは次のように変更されます。

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">*{  margin:0px;  padding:0px;}body{height:1000px;}#thediv{  width:100px;  height:100px;  background-color:#CCC;  position:fixed;  _margin-top:20px;  _position:absolute;  _top:expression(eval(document.documentElement.scrollTop));  left:20px;  top:20px;  text-align:center;  line-height:100px;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){   $(window).scroll(function(){     $("#thediv").text($(window).scrollTop());  })}); </script></head><body><div id="thediv"></div></body></html>

上記のコードは、最初の例に基づいて、次のコードを追加します。

*html{  background-image:url(about:blank);  background-attachment:fixed;}

元のアドレスは、http://www.51texiao です。 .cn/div_cssjiaocheng/2015/0405/144.html

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、