What can i use instead of css box-sizing?
Question
I have the following html and css codes. I don't want to use box-sizing:border-box which is not supported in some browsers like IE(6-7), how may I solve my problem with css in order to still have the same orders of the div s? I want the gaps between the floated divs remain the same.
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; } 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%; }
<!DOCTYPE html> <html> <head> </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>
1 answers
solution1
0 2020-03-16 01:52:54
I found the polyfill for box-sizing:border-box which can help you to solve your issue for IE 7 browser.
You can download the polyfill from the link below.
A CSS box-sizing: border-box polyfill for IE 6/7
You need to include it after this line box-sizing: border-box in your CSS code.
box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);
Your modified code:
<!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>
Output with IE 7 document mode in IE 11 browser:
Note: The IE 7 browser was out of support a long time ago. It is not recommended to use IE 7 browser. I suggest you use the latest Microsoft browsers. If you are not available to upgrade to the latest Microsoft browser then at least move to IE 11 browser.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.