|
This comment is tangential on purpose, but if anyone is curious as to _why_ we use the `display: inline-block; *display: inline; zoom: 1` "hack" to support IE7, then I will gladly explain it to you. First, CSS is cascading, meaning a rule following another rule will override it. Second, attributes with an asterisk prepended to the property name are only picked up by IE7. Finally, in a nutshell, IE7 treats layout differently than other browsers. On IE7, certain elements get layout by default, but other elements can be "given" layout by using certain properties (that we refer to as "hacks") like `zoom: 1`. When an element has layout in IE7, it can be given a display of inline and act like inline-block. This is one of the many reasons why older versions of IE were such headaches for web designers. More info about IE7's hasLayout quirk can be found here[1]. If we apply what is described above into these rules, we get this: 1. display: inline-block is applied to the element. 2. on IE7, display: inline is added to the element. 3. on IE7, zoom: 1 gives the element layout, thus making it act like it act like an inline-block. Other browsers attempt to "zoom" the element, but since it's at "1", this is like saying "zoom the element 1x the size," so it does nothing. I hope that helps clear up why we use this hack. [1]: http://reference.sitepoint.com/css/haslayout |