CSS3相当于width：calc(100％ – 10px)

我正在寻找一种迁移我的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()之前已经说过了,并且找不到其他解决方案,例如.使用边缘权利,填充权利等

@EDIT：我创建了一个小提琴http://jsfiddle.net/dj3hh/来显示预期的行为 – 你可以调整小提琴的大小,所有的边距都是从右边的10px.我想要一个新的方式来做这个withou calc()

解决方法

如果您将框模型渲染更改为框大小：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;
}

原文地址：https://www.jb51.cc/css/214239.html