Uhm, since you don’t seem to be centering those (the ONLY reason to use inline-block) I’d suggest setting the LI to display:inline and then floating the anchors. Floats don’t have the whitespace quirk. (I wouldn’t call it a bug)… I also would HIGHLY suggest specifying a line-height since christmas only knows what it’s going to inherit.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<title>
Test Menu
</title>
<style type="text/css"><!--
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
#demoMenu {
list-style:none;
overflow:hidden; /* wrap floats */
width:100%; /* trips haslayout, wraps floats IE */
}
#demoMenu li {
display:inline;
}
#demoMenu a {
float:left;
padding:10px;
font:normal 12px/14px arial,helvetica,sans-serif;
background:#DDD;
}
--></style>
</head><body>
<ul id="demoMenu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</body></html>
Works just fine. Even if I was going for inline-block I wouldn’t be doing it on the LI or even trying to apply styling to the LI since IE can’t make block-level tags inline-block. Set the LI to display:inline, don’t even TRY to apply any other styling to it, and target the anchor instead.
Oh, and depending on font that letter-spacing trick Rayzur mentioned for webkit can be inaccurate and result in the elements overlapping. For MOST fonts 0.4em is closer but can still result in +/-1px from the desired effect. You can test this by putting a 1px border on each side.
… and I’d never try to use font-size:0 on a wrapping element in the first place since it automatically restricts you to use PX font sizes. (mind you other things may do that too, but it’s just a bad idea all-around)
If you ARE trying to center it the word-spacing and letter-spacing combination also causes problems with centering or right alignment in Firefux as of 3.5, as it will subtract the letter-spacing from the width of the first element, making the centering off by that much. Still, word-spacing is the correct behavior, and word-spacing is NOT supposed to collapse inline-level elements over each-other; as such it’s the correct unit to use when/if webkit pulls it’s head out of it’s ass on it… and due to the no-collapse rule you can set absurd values like -2em and it will still work… unlike letter-spacing which DOES allow for overlap which is why you end up playing games with the amount and NEVER having it work right everywhere.
Which is why I’ll often say “shtup it” and just float them. It’s less headaches. It also means you don’t need the ‘exact’ whitespace… manipulating the markup just to remove oddball whitespace behaviors is just asking for it to break sometime/someplace/somewhere in the future.
)
