Размешение одинаковых размеров в сетке?

Question

Я ищу для ie8-совместимый способ создания сетки:

http://jsbin.com/ihicuz/1/edit

HTML:

<div class="grid"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    </div> 

CSS:

.grid{ 
    background:#DDD; 
    width:830px; 
    height:830px; 
} 
.grid>div{ 
    height:200px; 
    width:200px; 
    box-sizing:border-box; 
    border:1px solid #AAA; 
    float:left; 
    margin:0 10px 10px 0; 
    background:#EEE; 
} 
.grid>div:nth-child(4n){ 
    margin-right:0; 
} 

п-й ребенок работает (хорошо , игнорируя переполнение нижней границы поля), но не работает на ie8.

Есть ли чистое решение для получения равного расстояния между этими элементами сетки без изменения разметки html?

Answer 1

Selectivizr заботится о многих проблемах совместимости IE с селекторами CSS3.

http://selectivizr.com/