If I could, I’d give you a special present this christmas - I’d tell
you how to make IE on Windows behave like a grown-up browser. Sadly,
reality sucks - as does IE on Windows - so I can only offer to share
with you a couple of CSS tips to ease the pain of working with that
piece of crappy software.
1. Reset browser styles
To start off with the right leg, I suggest you reset the styles to
some sensitive defaults, so all browsers will render the page as
similarly as possible. To do so, you can use one of the many suggested templates to create a reset.css file and include it before you include any other of your style sheets.
2. Add IE 5.5+ png file support
Angus Turnbull over at TwinHelix has written a nice htc script
to bring png images support to IE 5.5+. To use it, simply add the
following css code into your ie.css file, which you’ve previously
included with IE conditional comments - you do use conditional comments, right?
<code>img, h1, .class-with-png-background-image {<br /> behavior: url(../htc/iepngfix.htc);<br />}</code>
</pre>
<p>I won’t go deep into explaining how this works as you can easily find more info on the <a href="http://www.twinhelix.com/css/iepngfix/">author’s site</a>. Suffice to say that you need to call the iepngfix.htc file as an ie-only <a href="http://msdn2.microsoft.com/en-us/library/ms531079%28VS.85%29.aspx">dhtml behaviour</a> attribute on the img element and/or any other element where you may want to use png background images on.<br />
The only problem with this script that I’ve found so far, is that it won’t work with repeating background images.<br />
Also you should make sure that the server is configured to serve .htc
files correctly. If the script doesn’t work, all you need to do is to
add the following line to your .htaccess file, and you should be good
to go:</p>
<pre><code>AddType text/x-component .htc</code>
</pre>
<h3>3. Add IE < 7 custom :hover support</h3>
<p>Another annoying IE problem is that it doesn’t support css :hover
events on elements other than links. This can be easily solved with
another .htc script, this time written by <a href="http://www.xs4all.nl/%7Epeterned/">Peter Nederlof</a> and you can download it on the <a href="http://www.xs4all.nl/%7Epeterned/csshover.html">Whatever:hover script page</a>.<br />
This script is even easier to use than the png trick, because all it takes is one line in your ie-specific css file:</p>
<pre><code>body { behavior:url("../htc/csshover.htc"); }</code>
4. “Give layout” to elements
The source of most of Internet Explorer’s bugs comes from an IE-only property called layout.
An element can either have layout or not, which determines how an
element is rendered by the browser. Most of IE bugs can be squashed by
giving layout to the offending element, which is done simply by
assigning one of the following properties to that element:
position: absolute [IE 6 & 7]
float: left [IE 6 & 7]
float: right [IE 6 & 7]
display: inline-table [IE 6 & 7]
any width or height value [IE 6 & 7]
zoom [IE 6 & 7]
min-width [IE 7]
max-width [IE 7]
min-height [IE 7]
max-height [IE 7]
overflow [IE 7]
An exhaustive article on having layout can be found at http://www.satzansatz.de/cssd/onhavinglayout.html.
5. Prevent the double margin bug from crumbling your layout
This one has saved me a lot of headaches, because IE 6 has a tendency to double the margins of every element, which has been floated and assigned a left/right margin. To overcome this bug, simply set display: inline on the offending element. This will magically make the bug disappear with no adverse effects on your layout.
If you’ve found these tips useful and your future IE-development
experience somewhat more pleasant, I invite you to share your thoughts
by commenting below.
Source:scarfoo.com
