IE6 CSS Fixer – inline-block

IE6 CSS Fixer to rememberSuppose it is unnecessary to explain in details the specifics of the inline-block display value. The main problem with it is that it has no support in older browser versions. IE6 and IE7 have partial support only. In other words, working on native element you can’t use it on divs or lis and have to render it to something useless. It also has –moz specific support in FF2.

Let’s try to use the following:

ul li {display:inline; zoom:1;}

Seems to be quite simple, isn’t it? Just use display:inline and add a zoom:1 for block properties support. This fix provides you with basic inline-block support in IE6 and IE7 as well. What is more, you can decrease the use of unnecessary floats, eliminating the need for fixing certain overflow:hidden declarations and floats in general.

You also make “add zoom to backgrounds” option less harmful because it behaves flawlessly inside inline-block elements (while in floats it pushes the element to 100% width).

Note that version 0.8 has some additional fixes and better png detection. The 0.7 version was not good in using different syntaxes for background image declarations. Thus, you can get all pngs fixed easier.


Comments are closed.