IE8 display inline-block not working
Say I have the following code
<style type="text/css" media="all">
span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}
</style>
<span>i would want</span>
<ul>
<li>this</li>
<li>on</li>
<li>one line.</li>
</ul>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
Solution 1:
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
Solution 2:
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
Solution 3:
You can set margin-right:1px
worked for me pretty well.
Solution 4:
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
display: inline-block;
*zoom: 1;
*display: inline;