This weekend I decided to deep dive in a StackOverflow question on the combination of pseudo-elements and the IE8 (and lower) filters. Even though it seemed to me the question couldn’t be answered with 100% certainty, I still gave it a shot. A similar but better answer got accepted (damn you, “ScottS”!!), but that’s besides the point. The most important thing I learned from answering this question, is understanding the magic in IE (especially version 8 and below). So, for reference, here are the important links of articles that made me understand IE a bit better:
- On having Layout, a piece from 2008 explaining the details and consequences of IE’s take on layout.
- The MDSN article on hasLayout, a short one.
- A longer article: the MSDN Introduction to Filters, finally disclosing some details on that magic.
The kicker from all this research is that I now finally understand this remotely related line of CSS I’ve seen (and even used) a lot:
|
1 |
*zoom: 1; |
This is a CSS hack to get some versions of IE to behave nicely. So far, nothing new. However, after reading the above articles, I finally understand what it does: it forces the hidden IE property hasLayout to true. And that’s useful for quite a few cases where you’d expect things to have layout, but when they don’t by default.
Hack or not, I’m glad I understand things a wee bit more now.