Я нашел полифилл для Размеры бокса: border-box , который может помочь вам решить вашу проблему для браузера IE 7.
Вы можете скачать полифилл по ссылке ниже.
A CSS размеры ящика: полифилл с рамкой для IE 6/7
Вы должны включить его после этой строки Размер поля: рамка-граница в вашем CSS коде.
box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);
Ваш измененный код:
<!DOCTYPE html>
<html>
<head>
<style>
div[class="clmn"]{
border:solid .1em ;
background-color: rgba(255, 0, 0, 0.1);
width:33.13%;
padding:0.2em;
margin:.1%;
box-sizing:border-box;
*behavior: url(/boxsizing.htc); /*User need to modify the URL here...*/
}
div[id="div0"]{
background-color:rgba(0,0,255,0.1);
border:solid 1px red;
overflow:auto;
}
#div1{
float:left;
}
#div2{
float:right;
}
#div3{
float:right;
}
#div4, #div00{
width:100%;
}
</style>
</head>
<body>
<div id="div00" class="clmn"> This is div 00</div>
<div id="div0">
<div id="div1" class="clmn"> This is div 1</div>
<div id="div2" class="clmn"> This is div 2</div>
<div id="div3" class="clmn"> This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3. This is div 3.This is div 3</div>
</div>
<div id="div4" class="clmn"> This is div 4</div>
</body>
</html>
Вывод в режиме документа IE 7 в IE 11 браузер:
Примечание. Браузер IE 7 долгое время не поддерживал go. Не рекомендуется использовать браузер IE 7. Я предлагаю вам использовать новейшие браузеры Microsoft. Если вы не можете обновить браузер Microsoft до последней версии, по крайней мере перейдите на браузер IE 11.