Especificando classes no html conforme versão do Internet Explorer

Esse é um esquema utilizado com frequência na comunidade de desenvolvedores, está em vários boilerplates. É uma solução rápida e fácil pra quem precisa especificar algum estilo pra algum objeto somente no IE ou em algum versão dele.

O código abaixo exibe uma classe “ie” junto de uma “ie+versão do IE”. Ex: No Internet Explorer 8, ele vai exibir duas classes, são elas: “ie” e “ie8”.

	
	
	
	

Logo, o html no Internet Explorer 8 ficará assim:

	< html class="ie ie8">

E caso você vá usar um seletor específico pra corrigir algum pepino no IE, ficará assim:

	.ie SELETOR {
		/* estilos */	
	}
	.ie7 SELETOR {
		/* estilos */	
	}

Em breve posto a alternativa que eu costumo usar – que é feita em JS.

 

Solução para inline-block no Internet Explorer 7

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!