Van*_*ing 11 css css3 firefox4
我真的很喜欢CSS的盒子大小.在Chrome,IE8 +和Opera(不知道从哪个版本)支持.Firefox 4似乎忽略了它.
我知道有-moz-box-sizing属性,但每次我想改变box-sizing类型时我是否真的必须编写它？
码
<html>
<head>
<style type="text/css">
.outer{
width:600px;
height:100px;
background-color:#00ff00;
border:1px solid #000;
}
.inner{
width:100%;
height:100%;
background-color:#ff0000;
border:1px solid #fff;
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Bol*_*ock 23
Firefox实现-moz-box-sizing了一个额外的值padding-box(非常不言自明).我怀疑这个属性在"前缀地狱"中的原因 - 如果你愿意 - 是padding-box由Mozilla引入的值最近才被添加到规范而没有其他实现,并且它可能会从规范中删除其他实现仍然不会在CR期间或在CR期间出现.
不幸的是,Firefox 4仍然需要前缀,并且已经持续了很多年:
.inner {
width: 100%;
height: 100%;
background-color: #ff0000;
border: 1px solid #fff;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
话虽这么说,Firefox终于box-sizing在第29版开始时没有前缀.我相信实验padding-box价值仍然受到支持,但它仍处于危险之中.再说一次,你需要使用的几率padding-box非常低,所以你可能没有什么可担心的.border-box风靡一时,不像padding-box不会很快消失.
因此,简而言之:如果您不关心最新版本以外的任何内容,则不再需要前缀.否则,如果你已经有了前缀,那么保持它一段时间是没有害处的.
另请参阅MDN上的文档.