Bombolom.com : /webdev/CSSIEPositionFixedBug-2007-10-29-18-35.html

`(webdev)` IE 'position: fixed' bug

Este é um post de José Lopes.

No CSS a expressão 'position: fixed' define que a classe ou instância que a contém assume uma posição fixa no écran e não se mexe com o scroll.

Mais uma vez, o IE surpreende-nos por não suportar esta propriedade. Encontra-se a descrição deste Bug na internet, sendo mencionado que tal não acontece na versão Mac e no IE7 quando seleccionado o modo strict.

Uma vez que este modo strict apresenta por vezes problemas e de qualquer modo não me resolvia o problema para versões anteriores do IE, iniciei uma busca para encontrar uma solução só com CSS e sem javascript, tão usado para resolver os bugs do IE, e apresento aqui a que encontrei.

Em primeiro lugar, no ficheiro do CSS devemos definir o estilo normalmente, i.e., com a 'position: fixed' onde acharmos que devemos utilizar.

Tomando um exemplo prático, imaginemos que pretendemos ter um menu lateral do lado esquerdo e um bloco de texto do lado direito que ficará sujeito ao scroll. Definimos o estilo do menu, por exemplo:

div.menu {
	float: left;
	position: fixed;
	z-index: 1;
	}

O bloco de texto para o lado direito não necessita de nenhuma formatação especial, como float ou position.

Se notarem temos um z-index: 1; para forçar o menu a ficar por cima do texto do lado direito, caso contrário no IE ele fica por baixo. Eu defini aqui uma classe mas também poderia ter usado uma instância (#menu).

Para fazer funcionar no IE temos de acrescentar o seguinte código ao nosso CSS:

@media screen {
	* html, 
	* html body { 
		overflow-y: hidden; 
		height: 100%;
		}
	* html #iefix { 
		height: 100%;
		overflow-y: scroll;
		position: relative;
		}

	* html div.menu {
		position: absolute;
		}
	}

Este estilo só vai ser reconhecido pelo Win/IE.

Algumas notas sobre este código:

O símbolo * tem de estar presente caso contrário os outros browsers não ignoram esta parte.
O height deve ter o valor apresentado para evitar problemas no IE.
A instância iefix é parte da magia que resolve o problema, sendo a sua aplicação demonstrada um pouco mais adiante.
A última parte com div.menu é a chamada ao que pretendemos que fique fixo no écran, neste caso a classe menu. Caso haja mais do que um deve aqui ser incluída, e caso fosse uma instância teria como terminologia #.menu, como por exemplo:
```
* html div.menu3, 
* html div#menu2,
* html div.menu {
	position: absolute;
	}
```
Ainda sobre esta última parte, só devemos incluir o que édiferente para o IE como a position

Definido o nosso CSS basta aplicá-lo. Para tal devemos seguir uma estrutura para os ficheiros HTML do tipo:

<html>
<head>
</head>

<body>
  <div id="iefix">
	Aqui o bloco de texto do lado direito
  </div>
	Aqui os elementos que queremos que fiquem fixos
</body>
</html>

A nossa pagina deve agora funcionar como mostra o exemplo (nova janela).

Esta solução tem por base a apresentação nos sites gunlaug.no e css-discuss.incutio.com.
Funciona para a maioria das aplicações que necessito e não utiliza javascript.

Outras soluções, mais complexas a meu ver, existem em:

29.10.2007 | Ler mais | Comentários | Tags html, css

(webdev) IE 'position: fixed' bug

`(webdev)` IE 'position: fixed' bug