Ou seja, 6 vs. posição: fixo
-
21-08-2019 - |
Pergunta
Posição: Corrigido que não funciona para o Internet Explorer 6. Não consigo entender as correções encontradas no Google. Eu preciso que ele funcione no IE6, IE7, IE8 e 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>
Solução
Não apoie o IE6! Quanto mais cedo as pessoas param de invadir sites para o IE6, menos tração ele terá e mais rápido ele morrerá! Ou adicione este código após o seu primeiro bloco de estilo;
<!--[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]-->
O resultado não é super suave, mas funciona.
ATUALIZAR
Eu não estava muito claro sobre como isso deve ser usado; Basta adicionar o ID (ou classe) de quaisquer elementos que tenham "posição: corrigidos" à lista de declaração no início do bloco acima e eles se comportarão no IE6.
Outras dicas
Sim, ie6 é uma merda. Aqui está o hack ...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
Isso basicamente diz ao IE6 para mantê -lo absolutamente posicionado no canto superior esquerdo, mesmo enquanto rola. Isso deve ficar sob o restante do seu CSS para o elemento, para que ele o ultrapasse no IE6.
Aqui está para o seu bar esquerdo ...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
Acabei de testar isso na versão do IE6 da IETESTER e funcionou muito bem e ... sem jitter, whoo!
Digamos que você tenha um elemento com uma classe de caixa, por exemplo ...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Substitua a abertura <HTML>
Tag com declarações condicionais do IE ...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
e
<!--[if !IE]--> <html> <!--[endif]-->
Então, gosto MATW & Mitchbryson Uso sugerido 'expressão' para simular a posição fixa.
NOTA: Este código segue os estilos do elemento original no CSS.
#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');
}
O problema é que, em qualquer página, role o elemento irá tremer, essa é uma maneira de compensar ...
Nota: Este código vai na parte superior do seu CSS ou após o seu estilo 'html {}' em seu CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
De acordo com Thomas Aylott @ Suttlegradient.com,
"... isso força o processamento do CSS antes da página ser redesenhada. Como está processando o CSS novamente antes de redesenhar, ele seguirá em frente e processará suas expressões CSS antes de redesenhar também. Isso oferece a você elementos fixos de posição perfeitamente suave!" "
Link do artigo: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
Por exemplo, todos juntos ...
<!--[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>
Encontrei esta solução que eu ajustei (basicamente as linhas que mudei foi: $ ('#latebar_left'). CSS ('top', document.documentElement.scrolltop);):
// 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');
}
}
}
Ele abre e parece ruim, mas trabalhe em todos os navegadores, incluindo o IE6.
Recentemente, escrevi um plugin jQuery para obter a posição: Fixed Working no IE 6+. Isto não Jitter On Scroll, ele analisa a capacidade (não o agente de usuário), funciona no Internet Explorer 6, 7, 8.
Se você usar o modo rigoroso na posição IE7+: fixo será homenageado, mas por padrão o IE7+ opera no modo Quirks. Este plug -in verifica a capacidade do navegador e, se não honrar a posição: corrigido, ele implementa a correção do jQuery.
http://code.google.com/p/fixedposition/
Algo assim pode funcionar para você:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
Pode ser necessário fazer alguns ajustes menores de CSS para que ele funcione para o seu código. Estou trabalhando nos valores "Offset" como opções enquanto falamos.
É possível fazer isso com a expressão de CSS, mas com algum hack extra para obter uma rolagem suave:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}