recherche
Maisoninterface Webtutoriel HTML如何在IE6下实现position:fixed效果_html/css_WEB-ITnose

如何在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下top功能失效了,所以要加一个_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

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Quelle est la balise racine dans un document HTML?Quelle est la balise racine dans un document HTML?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentalis.itSercesasthetop-lelement thatchicapsulatel alothercontent, assurant des produits de base de la propriété.

Les étiquettes et les éléments HTML sont-ils la même chose?Les étiquettes et les éléments HTML sont-ils la même chose?Apr 28, 2025 pm 05:44 PM

L'article explique que les balises HTML sont des marqueurs de syntaxe utilisés pour définir les éléments, tandis que les éléments sont des unités complètes, y compris des balises et du contenu. Ils travaillent ensemble pour structurer les pages Web. Counomage de Character: 159

Quelle est la signification de & lt; head & gt; et & lt; body & gt; Tag dans HTML?Quelle est la signification de & lt; head & gt; et & lt; body & gt; Tag dans HTML?Apr 28, 2025 pm 05:43 PM

L'article traite des rôles de & lt; Head & gt; et & lt; body & gt; Tags dans HTML, leur impact sur l'expérience utilisateur et les implications SEO. Une bonne structuration améliore la fonctionnalité du site Web et l'optimisation des moteurs de recherche.

Quelle est la différence entre & lt; Strong & gt;, & lt; b & gt; Tags et & lt; em & gt;, & lt; i & gt; Tags?Quelle est la différence entre & lt; Strong & gt;, & lt; b & gt; Tags et & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PM

L'article traite des différences entre les balises HTML ,,, et se concentrant sur leurs utilisations sémantiques et présentatrices et leur impact sur le référencement et l'accessibilité.

Veuillez expliquer comment indiquer le jeu de caractères utilisé par un document en HTML?Veuillez expliquer comment indiquer le jeu de caractères utilisé par un document en HTML?Apr 28, 2025 pm 05:41 PM

L'article discute de la spécification du codage des caractères dans HTML, en se concentrant sur l'UTF-8. Problème principal: assurer un affichage correct du texte, prévenir les caractères brouillés et améliorer le référencement et l'accessibilité.

Quelles sont les différentes balises de formatage dans HTML?Quelles sont les différentes balises de formatage dans HTML?Apr 28, 2025 pm 05:39 PM

L'article traite de diverses balises de formatage HTML utilisées pour structurer et styliser le contenu Web, mettant l'accent sur leurs effets sur l'apparence du texte et l'importance des balises sémantiques pour l'accessibilité et le référencement.

Quelle est la différence entre l'attribut «ID» et l'attribut «classe» des éléments HTML?Quelle est la différence entre l'attribut «ID» et l'attribut «classe» des éléments HTML?Apr 28, 2025 pm 05:39 PM

L'article traite des différences entre les attributs «ID» et «classe» de HTML, en se concentrant sur leur caractère unique, leur but, leur syntaxe CSS et leur spécificité. Il explique comment leur utilisation a un impact sur le style et les fonctionnalités de la page Web et fournit les meilleures pratiques pour

Quel est l'attribut «classe» dans HTML?Quel est l'attribut «classe» dans HTML?Apr 28, 2025 pm 05:37 PM

L'article explique le rôle de l'attribut HTML «classe» dans le regroupement des éléments pour le style et la manipulation JavaScript, en le contrastant avec l'attribut «ID» unique.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP