2010-02-17 12:27:01 +00:00
-----
isHidden: false
menupriority: 1
kind: article
2010-03-30 14:39:12 +00:00
created_at: 2009-10-30T22:34:46+02:00
2010-02-17 12:27:01 +00:00
title: How to handle evil IE
2010-05-09 12:53:46 +00:00
author_name: Yann Esposito
author_uri: yannesposito.com
2010-02-17 12:27:01 +00:00
tags:
- web
- webdesign
- jQuery
-----
For developer IE is a nightmare. This is why, I use a method to disable my standard CSS and enable a IE only CSS. I use jQuery to accomplish that.
2010-04-15 09:45:50 +00:00
< div > < code class = "javascript" >
2010-02-17 12:27:01 +00:00
$(document).ready( function() {
if ($.browser["msie"]) {
// include the ie.js file
$('head').append('< script type = "text/javascript" src = "/js/ie.js" > < / s c r ' + ' i p t > ' ) ;
}
});
2010-04-15 09:45:50 +00:00
< / code > < / div >
2010-02-17 12:27:01 +00:00
2010-04-15 09:45:50 +00:00
< div > < code class = "javascript" file = "ie.js" >
2010-02-17 12:27:01 +00:00
// Remove all CSS I don't want to use on IE
$('link[rel=stylesheet]').each(function(i)
{
if (this.getAttribute('href') == '/css/layout.css')
this.disabled = true;
if (this.getAttribute('href') == '/css/shadows.css')
this.disabled = true;
if (this.getAttribute('href') == '/css/gen.css')
this.disabled = true;
}) ;
// Append the CSS for IE only
$('head').append('< link rel = "stylesheet" type = "text/css" href = "/css/ie.css" / > ');
// I also add a message on top of the page
$('body').prepend('< div id = "iemessage" > < p > < span class = "fr" > < em > Avec < a href = "http://www.firefox.com" > Firefox < / a > et < a href = "http://www.apple.com/safari" > Safari< / a > cette page est bien plus jolie !< / em > < / span > < span class = "en" > < em > This page is far nicer with < a href = "http://www.firefox.com" > Firefox < / a > and < a href = "http://www.apple.com/safari" > Safari< / a > !< / em > < / span > < / p > .< / div > ');
2010-04-15 09:45:50 +00:00
< / code > < / div >
2010-02-17 12:27:01 +00:00
That's it.