css - CSS3 相当于 width: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;
}

Answer 2

穿上position: relative父元素，然后做...

.fit {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
}