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等。

@编辑： 我创建了一个代码片段http://jsfiddle.net/dj3hh/来展示期望的行为 - 您可以调整代码片段的大小，所有边距都与10px右对齐。我希望有一种新的方法来实现这一点，而不使用calc()。

- Ragen Dazs

---

使用Qt-Webkit CSS calc - Ragen Dazs

能否在jsFiddle上制作一个简化的示例？ - Adrift

1. 请提供一个 JSFiddle。
2. 允许使用 jQuery 吗？

- Bram Vanroy

也许使用 width:90% 或类似的方式来逼近尺寸是可以的？如果您需要严格遵守 10px 的要求，您可以引入一个包装元素。 - Christoph

@BramVanroy 我进行了编辑并添加了示例 - 请查看。 - Ragen Dazs

Answer 1

如果您将盒模型渲染更改为box-sizing: border-box，那么填充将包含在总宽度中，而不是被添加到其中。

通过此示例，我假设您正在将该类添加到包装元素中。

.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;
}

- Timidfriendly

---

内边距（padding）不等于外边距（margin）！你的解决方案与原帖作者想要的不同。 - Christoph

@timidfriendly 请比较这两个链接（使用calc）http://jsfiddle.net/dj3hh/ （使用box-sizing）http://jsfiddle.net/dj3hh/1/ - Ragen Dazs

为了完整性；从 .fit 中移除 padding-right 并将其应用于 <td>，我相信这正是您要寻找的。 - Timidfriendly

这对我很有帮助！非常感谢你！ - Renato Leite

我强烈推荐在所有新项目中使用 * { box-sizing: border-box; }。我假设大多数人不需要支持IE7？ - pip

Answer 2

在父元素上添加position: relative，然后执行...

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

- methodofaction