A while back, I found a way to make my inline-block spacing issues go away by getting tricky and using word-spacing to remove the gap, as discussed and tested here. I failed to check the results in a webkit browser, though, and recently discovered a slight problem.

Mainly, they don’t support that.

For whatever reason, IE, Firefox and Opera all apply word-spacing styling to inline-blocks, either adding to or removing the whitespace between the elements depending on your style. Safari and Chrome, however, do not. Mind you, they both have whitespace between the elements. They simply don’t allow the use of word-spacing to modify that space.

Here’s an example page showing the use of word-spacing with inline-blocks and normal sentances. Take a look in a webkit and non-webkit browser to notice the difference. (I didn’t bother to do IE 6&7 correction, so those browsers won’t show the lists side-by-side. Upgrade your browser already!)

As you’ll see, the webkit browser isn’t removing the whitespace.

So, the question is this: Does the w3c spec say what behavior is supposed to occur? Is the webkit result a bug/out-of-spec, or are the other browsers providing a result that isn’t required by the spec? It seems to me that the non-webkit result is the proper one. If you’re going to make blocks behave like words with spacing, you should be able to modify them in the same fashion. But then, there’s a lot about CSS that doesn’t always work like you think it should. (point in case: vertical-align. Probably the worst style ever.)