Как кроссбраузерно разделить div на 9 равных дивов?(3х3)

#css #вёрстка #веб_программирование

Здравствуйте. Хотелось бы, чтобы вы поделились своими рецептами кроссбраузерного(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;
  }

	

	

	

	

	

	

	

	

	













На всех браузерах отображается корректно, но для Safari нужно прописывать в .table
display: table. А Firefox не отображает все корректно.
    

Ответы

Ответ 1

Сноси font-size и делай по-человечески:



* {
  box-sizing: border-box;
}

.table {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 100%;
  background: white;
  border: 1px dotted green;
}

.table div {
  width: 33.33333333333333333333%;
  height: 33.3333333333333333333%;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
}

  

    Вставить
  

    содержимое
  

    легко
  

    просто
  

    не
  

    надо
  

    трогать
  

    сочетание
  

    </div><div>
  







i {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-vkontakte { background-image: url(//vk.com/favicon.ico); }
.icon-facebook { background-image: url(//www.facebook.com/favicon.ico); }
.icon-github-circled { background-image: url(//github.com/favicon.ico); }
.icon-linkedin-squared { background-image: url(//ru.linkedin.com/favicon.ico); }

a {
  display: inline-block;
  width: 50%;
  height: 50%;
}

a:hover {
  background: silver;
}

html, body, div {
  height: 100%;
  margin: 0;
  padding: 0;
}

  
    

  
    

  
    

  
    

  



Ответ 2

Нет IE8 под рукой, но должно работать и там:



.table {
  width: 300px;
  height: 300px;
  display: table;
}
.row {
  display: table-row;
}
.row div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 33%;
  height: 33%;
}

  

    
1
    
2
    
3
  
  

    
4
    
5
    
6
  
  

    
7
    
8
    
9