我正在寻找一种迁移我的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;
}
