css: column-count property , IE10 displays not like other browsers

Question

Here is a http://jsfiddle.net/nAhPj/ link. The page looks the same way in Chrome, FF, Safari, but not in IE10. It should be:

1A 2A 3A 4A
1B 2B 3B 4B
1C 2C 3C
1D 2D 3D

Why doesn't it look in IE10 the same way as in Chrome, FF, Safari? How to fix the IE10 issue? Is that a bug?

P.S. Unfortunately, the solution should be to OVERRIDE the css , not to modify html or css. Otherwise, I would found the solution and won't ask this question.

Here are the images how it looks in Chrome vs IE10: enter image description here

What *does* it look like in IE10? – cimmanon Nov 08 '13 at 15:42 — cimmanon, Nov 08 '13 at 15:42

score 3 · Accepted Answer · answered Nov 08 '13 at 15:01

3

The most simple solution to have a cross browser solution (i mean recent browsers) is to use <li> as blocks.

Position display: inline-block css property on your <li>, and then use float and width properties to position them as you want. And you can do responsive design with this.

answered Nov 08 '13 at 15:01

OlivierH

3,875
1
19
32

1

Thank you! Applying display: inline-block; and width:200px; to the
is the solution.

Haradzieniec

Nov 08 '13 at 15:50

css: column-count property , IE10 displays not like other browsers

1 Answers1