IE position 6 par rapport à: fixer
https://stackoverflow.com/questions/1074335
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Position: fixe qui ne fonctionne pas pour Internet Explorer 6. Je ne peux pas vraiment comprendre les correctifs trouvés sur Google. J'ai besoin pour travailler dans IE6, IE7, IE8 et FireFox 3.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
La solution
Ne pas soutenir IE6! Plus tôt les gens arrêtent des sites de piratage sur pour IE6, moins il aura la traction et plus vite il va mourir! Ou, ajoutez ce code après votre premier bloc de style;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
Le résultat est pas super lisse, mais il fonctionne.
UPDATE
Je n'étais pas trop clair sur la façon dont cela devrait être utilisé; il suffit d'ajouter l'identifiant (ou classe) de tous les éléments qui ont « position: fixed ». à la liste de déclaration au début du bloc ci-dessus et ils se comportent dans IE6
Autres conseils
oui IE6 suce. voici le hack ...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
qui indique essentiellement IE6 pour le maintenir en position absolue dans le haut à gauche même si elle défile. cela devrait passer sous le reste de votre css pour l'élément il le sur-promenades dans IE6.
ici est pour votre barre de gauche ...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
Je viens de tester cela sur la version IETester de IE6 et il a très bien fonctionné et ... Non Jitter, Whoo!
Disons que vous avez un élément avec une classe de boîte par exemple ...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Remplacer la balise d'ouverture avec des instructions conditionnelles <HTML> IE ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
et
<!--[if !IE]--> <html> <!--[endif]-->
Alors comme MATW mitchbryson suggéré 'expression' utiliser pour simuler la position fixe.
Remarque:. Ce code va après les styles dans le CSS de l'élément d'origine
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
Le problème est que sur une page défiler l'élément est la gigue, c'est une façon de compenser ...
Note: Ce code va en haut de votre CSS ou après votre style « HTML {} » dans votre CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
Selon Thomas Aylott @ SubtleGradient.com,
» ... Cela force le traitement de la CSS avant que la page est redessinée. Puisqu'il est le traitement du nouveau avant de redessiner css, ça va aller de l'avant et de traiter vos expressions avant de redessiner css aussi. Cela vous donne parfaitement Position lisse éléments fixes! ""
article lien: http://subtlegradient.com/articles/2009/07/29/ css_position_fixed_for_ie6.html
Par exemple, tous ensemble ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
trouvé cette solution que je peaufiné (essentiellement les lignes I modifié était: Css ( 'top', document.documentElement.scrollTop) $ ( '# sidebar_left');.):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo@gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
Il frousse et semble mauvais, mais le travail sur tous les navigateurs, y compris IE6.
J'ai écrit récemment un plugin jQuery pour obtenir la position: fixed travail dans IE 6 +. Il ne pas gigue sur rouleau, il regarde la capacité (non-agent utilisateur), fonctionne dans Internet Explorer 6, 7, 8.
Si vous utilisez le mode strict en position IE7 +: fixe sera honoré, mais par défaut IE7 + fonctionne en mode Quirks. Ce contrôle plugin pour la capacité du navigateur, et si elle ne respecte pas la position. Fixe, il met en œuvre le correctif jQuery
http://code.google.com/p/fixedposition/
Quelque chose comme cela peut fonctionner pour vous:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
Vous devrez peut-être faire quelques ajustements mineurs CSS pour le faire fonctionner votre code. Je travaille sur « offset » les valeurs que les options que nous parlons.
Il est possible de le faire avec l'expression CSS, mais avec un peu bidouille supplémentaire pour obtenir un défilement régulier:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}
