Mar 02, 2010
By far the most difficult thing to master when learning to code with web standards is browser optimization. It seems like every layout presents a different challenge than the last one. It's taken me years to figure out pretty much every bug Internet Explorer can throw my way, but I still struggle from time to time.
Part of coping with Internet Explorer (versions 6 and 7 in particular) means having some nifty tricks that can help you in a pinch. Some of my tricks aren't very well publicized, so I'm posting them here in hopes of saving at least one person from taking their frustration out on their innocent laptop, wife or dog.
Target IE6 or IE7 with a single character
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: yellow; /* IE6 exclusively */
Using text-indent on an input in IE6
If you use image sprites (which I highly recommend), you are likely to run into this problem. The
text-indent property does not work on an input. So you may get an image that looks like this:
Instead of hiding the text and replacing it with an image, both show up in IE6. The following three lines must be added to your IE stylesheet for the input in question to fix the problem:
display:block property is unnecessary if you are using a sprite or image replacement technique to replace the text (because it's already a block level element).
IE8 Rendering Modes
In typical Microsoft fashion, they actually present you with a bunch of rendering mode options in Internet Explorer 8 instead of just doing it the right way all of the time. So if you write code properly and it validates, you will want to add the following meta tag to the
<head> ALL of your layouts moving forward:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This tag enables the IE8 standards compliance mode on your website, which you would think should be active all the time.
Credit: Zurb.com- http://bit.ly/4RGzk
CSS Browser Selector
The Alpha-transparent PNG Paradox
One super-annoying issue with IE6 is that it doesn't know how to read alpha-transparent images properly. So if you have an image with a shadow over a transparent background or something with an opacity less than 100%, chances are it won't look so hot in IE6.
This isn't an easy fix. There are a number of recipes that cover different situations. Frankly, we try to avoid all of them if we can and simply use different images in IE6 that don't have alpha-transparency. It doesn't look as cool, but that's what they get for using a crappy browser. Here are the best solutions I know about: