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:我创建了一个 fiddle http://jsfiddle.net/dj3hh/显示预期的行为 - 您可以调整 fiddle 的大小，所有边距从右边开始尊重 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/

---

编辑:

我相信这是一个完全符合您要求的解决方案，请参阅 fiddle :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;
}