The following is my collection of time-saving tips for web coders. Every time I work on a project I have to keep in mind all browsers' quirks and compatibility issues, and remember the best and most standards-compliant workarounds. This page not only lists the problems and solutions in CSS implementations, but also provides links to the corresponding in-depth case studies and abstracts from the standards.
IE issue: relative positioning & having a layout
Whenever you use relative positioning of an element, the element looses its hasLayout attribute in IE, which causes all kinds of weird behaviors. To avoid this problemm use zoom: 1; or any other hasLayout trigger.
Related links:
- IE/Win: relatively positioned parent and floated child – disappearance by Ingo Chao
- On having layout - indispensable article by Holly Bergevin, Ingo Chao, Bruno Fassino, John Gallant, Georg Sørtun and Philippe Wittenbergh.
- ... and more articles
- Thoughts on IE hack management - a thorough case study of various hasLayout triggers.
IE issue: z-index value & positioned elements
In two words: In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
Related links:
- Effect of z-index value to positioned elements - a detailed case study by Aleksandar Vacić
- CSS 2.1 Specification - a section describing layered presentation as a whole and z-index in particular.
IE issue: box model discrepancy
This item is just a reminder about the differences between the standardized box model and IE's own vision of one. If you are using HTML 4.01 Strict or XHTML 1 Strict, however, it makes IE obey the standards.
Related links:
- Article on IE Box Model - at Wikipedia
- Internet Explorer and the CSS box model - an article by Roger Johansson