CSS3相当于宽度:calc(100% - 10px)

Question

我正在寻找一种替代方法来迁移我的CSS - 已经在使用FF和Chrome - ,因为QtWebKit它没有呈现一些CSS3功能.

我有以下东西:

.fit {
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
}

我想要一个类来适应线框示例中显示的所有元素.

注意:几乎所有的CSS3功能都可以完美呈现,但正如之前所说的那样*-calc()有问题并且无法找到其他解决方案,例如.使用margin-right,padding-right等等.

@EDIT:我创建了一个小提琴http://jsfiddle.net/dj3hh/来显示预期的行为 - 你可以10px从右边调整小提琴和所有边缘尊重.我想要一种新方法来实现这一目标calc()

Answer 1

如果将框模型渲染更改为,box-sizing: borderbox则填充将包含在总宽度中,而不是添加到其中.在这个例子中,我假设您正在将类添加到包装元素中.

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

浏览器支持非常好; 所有现代浏览器.只有你需要IE7及以下的polyfill.

有关更多背景信息,请访问:paulirish.com/2012/box-sizing-border-box-ftw/

编辑:

这是一个我相信完全符合你的简介的解决方案,请看小提琴:http://jsfiddle.net/David_Knowles/UUPF2/

.fit { 
    width:100%
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 
}

td {
    padding-right: 10px;
}