Retour à La Source • Tag: Internet Explorer • RSS

Internet Explorer 8, la nouvelle croix du développeur web ( EmulateIE7 )

noreply@ab-d.fr ( Benoit Asselin ) — Tue, 24 Mar 2009 19:00:00 +0100

Peut-être comme moi, vous venez de découvrir Internet Explorer 8 et que ce dernier est un " peu " plus compatible que Internet Explorer 7... Toutefois, certaines pages fonctionnent mal vu la quantité de patch CSS appliqués pour fixer les soucis de IE7, IE6, etc...

Microsoft a donc pensé à tout ! Il nous a sorti une balise META qui permet d'indiquer à Internet Explorer 8 la version du moteur graphique à utiliser. Pour forcer un rendu IE7 et non IE8, il suffit d'injecter la META ci-dessous :

Chose assez amusante, on pourrait croire que le site officiel de Microsoft est parfaitement compatible Internet Explorer 8, et qu'il n'a pas du tout besoin de cette META... et bien il n'en est rien, leur code source contient aussi la dite balise ! " Vive Microsoft ! "

Pendant ce temps, on doit toujours faire attention à Internet Explorer 6, utilisé par environ 1/4 des surfeurs du Web... Heureusement, ce chiffre baisse de mois en mois.

Documentation MSDN :
• http://msdn.microsoft.com/en-us/library/cc817574.aspx

border: 1px solid transparent Sous Internet Explorer 6 ( css , hack )

noreply@ab-d.fr ( Benoit Asselin ) — Wed, 17 Sep 2008 20:06:06 +0100

Astuce du jour : Comment faire comprendre à ce bon Internet Explorer 6.0 la couleur transparent appliquée sur un border ?

Une réponse peut déjà vous passer par la tête : " baaaahhhh un padding: 1px;, non ?! "...
oui mais voilà, Internet Explorer a une petite tendance à bugguer avec le CSS ( quelle découverte ! ) et pour fixer ces petits soucis, un border: 1px solid #fff; règle parfois le problème aussi étrange que celui puisse paraître, et donc la réponse a ma question prend tout son sens...

Cette solution n'est pas sans modifier le comportement du div impliqué, j'ai notamment remarqué que les propriétés de l'overflow n'étaient plus les mêmes. En bref, cette solution pourra ( je l'espère) vous aider, mais risque aussi de vous recréer d'autres problèmes ultérieurement. Je serais personnellement plus adepte d'un div dans un div.

Mais n'oubliez jamais cet adage : " Trop de div, Tue le div ! ".

Source du hack : http://acidmartin.wordpress.com/

Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS )

noreply@ab-d.fr ( Benoit Asselin ) — Sun, 01 Jun 2008 13:33:33 +0100

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
	if(navigator.appName == 'Microsoft Internet Explorer') {
		var png = /\.png$/i;
		var imgs = document.getElementsByTagName('img');
		for(var i = 0, l = imgs.length; i < l; i++) {
			if(png.test(imgs.item(i).src)) {
				imgs.item(i).style.width = imgs.item(i).offsetWidth;
				imgs.item(i).style.height = imgs.item(i).offsetHeight;
				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
				imgs.item(i).src = 'empty.gif';
			}
		}
	}
}

Fonctionnement de la function :
Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.
Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

Rappel des différentes écritures du filter en CSS :

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }

Astuce avec Math.max() et Math.min() en Javascript sous Internet Explorer

noreply@ab-d.fr ( Benoit Asselin ) — Sun, 06 Apr 2008 18:54:45 +0100

Math.max() et Math.min() attendent deux nombres comme paramètres. Math.max() retourne le plus grand des deux nombres, et Math.min() retourne le plus petits des deux nombres.

Depuis Microsoft Internet Explorer 5.5, vous pouvez ajouter plus de paramètres, et de manière générale les navigateurs dernières générations supportent cette écriture (Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera Browser...)

Rendre ''position: fixed'' compatible Internet Explorer 6 (CSS, expression)

noreply@ab-d.fr ( Benoit Asselin ) — Mon, 11 Feb 2008 18:50:05 +0100

Ce code a pour but de rendre compatible le fameux position : fixed sur Internet Explorer 6 à l'aide de la propriété expression() propre à ce dernier. Cette propriété permet de recalculer dynamiquement le contenu de l'expression expression(...) durant la manipulation de la page, en l'occurrence lors d'un évènement window.onscroll, sans code Javascript additionnel.

Page page-position.html

Rendre "position: fixed" compatible Microsoft Internet Explorer 6

DIV en position: fixed;

Contenu du site internet ...

UPDATE : Il est important de copier l'intégralité du code avec les balises commentaires propres à Internet Explorer, sinon le fix ne fonctionnera pas !