Block Elements Inside Multicolumn Layout - Padding Issue In Chrome/IE

Question

Question Description:

I've got an unordered list of items, using a typical ul -> li structure. I applied column-count:3 to this ul (along with prefixes). It works beautifully in Firefox. In Chrome and IE11 (where it should work according to caniuse), it works mostly, but I'm running into an odd behavior. Take a look at the screenshots:

Firefox:

Chrome:

If you'll notice, the middle column is pushed down in Chrome (IE11 is identical). It appears that in those two cases the browser is attempting to make the first two column equal height. Is there a way to tell it to respect block items?

---

Code:

HTML:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    ...
    <li>List Item 20</li>
</ul>

CSS:

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
}

ul li {
    display:block;
    list-style-type:none;
    padding:10px;
    margin-bottom:10px;
    border-left:solid 4px rgb(205,88,5);
    background-color:rgba(0,0,0,0.1);
}

---

Working Example:

JSFiddle: http://jsfiddle.net/6cVqZ/

Answer 1

On the first JSFiddle, I found adding to the li

display: inline-block;
width: 100%;

Worked to align the elements and fill the column width.

Edit:

The above currently works in both Firefox and Chrome perfectly. On IE, I also have to set the li to box-sizing:border-box;, because specifying width while padding is specified causes an overflow otherwise. Link to updated version of the original Fiddle, now working in all major browsers:

http://jsfiddle.net/6cVqZ/40/