Ie8 And Below Inline-block Css

So I know that IE8 and below does not like inline-block but I read that inline should result in the same behavior. So I modified copied my main.css to main-ie8below.css and changed

Solution 1:

You need to use this way:

display: inline;
zoom: 1;

I guess you missed the zoom: 1 part. And if you are coupling with the existing stylesheet, which goes for all the IE versions and modern browsers, it is good to use this way:

display: inline-block;
*display: inline;
*zoom: 1;

But the problem is that, your CSS might not validate.

---

I don't understand, which part is the one you didn't understand. Let me explain the three things I used.

1. Star Hack: Prepending a * in front of the style rule, will make it only visible to IE 7 and below.
2. Validation Issue: The rules *zoom and *display are not valid CSS properties.
3. How does this work? In IE 7 and below, this zoom: 1; will trigger the hasLayout property of the element, thereby making it available the width, height, margin and padding.

Solution 2:

It turned out to be the fault of HTML5 elements not being recognized by IE8. By adding HTML5shiv I was able to fix it.