提问人：Javad-M 提问时间：3/13/2020 最后编辑：Javad-M 更新时间：3/19/2020 访问量：436
我可以用什么来代替css box-sizing？
What can i use instead of css box-sizing?
问：
我有以下代码。我不想使用IE（6-7）等某些浏览器不支持的，我该如何解决我的问题，以便仍然具有相同的顺序？我希望浮动 div 之间的间隙保持不变。htmlcssbox-sizing:border-boxcssdiv
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>答：
0赞
Deepak-MSFT
3/16/2020
#1
我找到了 box-sizing：border-box 的 polyfill，它可以帮助您解决 IE 7 浏览器的问题。
您可以从下面的链接下载 polyfill。
CSS box-sizing： IE 6/7 的边框框 polyfill
您需要在CSS代码中的此行box-sizing： border-box之后包含它。
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 11 浏览器中使用 IE 7 文档模式输出：
注意：IE 7 浏览器很久以前就不再受支持了。不建议使用 IE 7 浏览器。我建议您使用最新的Microsoft浏览器。如果您无法升级到最新的 Microsoft 浏览器，那么至少要迁移到 IE 11 浏览器。
上一个：仅冻结顶行和滚动内容
评论
<div>