我可以用什么代替CSS Box的大小？

Question

我具有以下html和css代码。因为IE（6-7）中不支持box-sizing:border-box，如何仍可以用css的相同阶数解决div的I问题？我希望浮动div之间的差距保持不变。

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>

Answer 1

我找到了box-sizing：border-box的polyfill，它可以帮助您解决IE 7浏览器的问题。

您可以从下面的链接下载polyfill。

A CSS box-sizing: border-box polyfill for IE 6/7

您需要在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浏览器。

我可以用什么代替CSS Box的大小？

问题描述投票：-1回答：1

1个回答

最新问题

我可以用什么代替CSS Box的大小？

问题描述 投票：-1回答：1

1个回答

最新问题

问题描述投票：-1回答：1