How to fix list style not showing when using CSS3 columns on Webkit

问题

example here: http://jsfiddle.net/R7GUZ/3/

I'm having a heck of a time getting list-style to work in webkit for a parent OL styled with

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

How do I format an ordered list into columns with css3 and still maintain the list-style styling?

           <ol class="text-col2">
                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>

                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>
            </ol>

​

回答1:

Adding 20px margin-left to the lis did the trick

ol li {
   list-style: decimal;
   margin-left: 20px
}

回答2:

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

OL {
  list-style-position: inside;
}

Note if you have reset the margin and padding properties (like in your example on jsFiddle where CSS have been normalized), you will have to set them to the right values so columns are correctly formatted.

来源：https://stackoverflow.com/questions/12357468/how-to-fix-list-style-not-showing-when-using-css3-columns-on-webkit