List elements in early versions of IE

Older versions of Internet Explorer present a problem to many web developers. These older versions don’t support much of the modern languages and especially most of CSS3. One of the most frustrating things I have faced is making list element align horizontally next to each other. This technique is relatively commonly seen in many modern websites. Unfortunately early version s of IE do not support the easy way to do this, display: inline or display: inline-block. Using this without any other code will result in something like this:

 

IE fix for list elements

Now there are many options to fix this including adding libraries to make IE think it is a more modern browser. However, if you are like me you are probably including several libraries to make your site function just the way you like it. So adding another library is just going to slow down the site more. I found a simple solution just zoom: 1; and *display: inline; to your CSS code. This will be added along with your normal display: inline or display: inline-block. This result in it looking something like this:


IE fix for list elements

 

 

There you go problem solved! Hope this helped someone.

Leave a Reply

Your email address will not be published. Required fields are marked *