Здравствуйте. Хотелось бы, чтобы вы поделились своими рецептами кроссбраузерного(ie8+) деления дива на 3х3 только в процентах и только на дивы. Запрещается использовать адаптивные фреймворки и флексы.
.table {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 85%;
height: 100%;
background: white;
font-size: 0;
}
.table div {
width: 33.33333333333333333333%;
height: 33.3333333333333333333%;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
font-size: 0;
}
<div class="table">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="social">
<a href="" target="blank"><div><i class="icon-vkontakte"></i></div></a>
<a href="" target="blank"><div><i class="icon-facebook"></i></div></a>
<a href="" target="blank"><div><i class="icon-github-circled"></i></div></a>
<a href="" target="blank"><div><i class="icon-linkedin-squared"></i></div></a>
</div>
На всех браузерах отображается корректно, но для Safari нужно прописывать в .table display: table. А Firefox не отображает все корректно.