Why using CSS3 columns in Chrome removes item numbers on lists

Question

I noticed that chrome was erasing the number on my list-items when I add css to manipulate column-count...

For instance:

<ol style =-webkit-column-count: 2;...">
   ....
</ol>

The above does manage to overflow li's into a separate column as intended but it removes the default item numbering as well. This doesn't occur in Firefox, only chrome.

Any ideas?

Answer 1

It seems the numbers are actually hidden. This can be resolved by using the following property:

OL {
  list-style-position: inside;
}

Answer 2

You can always just throw a <div> around the <ol> and give the <div> multiple columns instead of the <ol>.

<div style = -webkit-column-count: 2;...><ol>
    ....
</ol></div>

When I do that, however, I end up with the 2nd column being one line higher than the 1st column for some reason. Also only happens in Chrome.

Edit: Solution to my above problem was just to add a zero margin for the <ol>, so this should work fine:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;>
    ....
</ol></div>

Oddly enough, having some padding on the <ol> seems to get rid of the numbers as well, so if you have padding somewhere that might be the culprit.