CSS3相当于宽度：calc（100％ - 10px）

我正在寻找替代方案来迁移我的CSS - 已经在FF和Chrome上工作，因为QtWebKit并没有渲染一些CSS3功能。CSS3相当于宽度：calc（100％ - 10px）

我有以下的东西：

.fit { 
    width: -moz-calc(100% - 10px); 
    width: -webkit-calc(100% - 10px); 
    width: -o-calc(100% - 10px); 
    width: calc(100% - 10px); 
}

我想作为显示线框例如一类适合所有元素。

enter image description here

注：几乎所有的CSS3功能可以完美呈现，但*-calc()之前赛义德有问题，无法找到其他的解决办法如。使用margin-right，padding-right等

@EDIT：我创建了一个小提琴http://jsfiddle.net/dj3hh/表现出预期的行为 - 你可以调整小提琴和利润率都尊重10px右。我想要一种新的方法来执行此操作calc()

来源

2013-04-29 Ragen Dazs

使用Qt-Webkit CSS'calc' – 2013-04-29 15:19:46

是否可以在[jsFiddle]（http://jsfiddle.net）中制作一个简化示例？ – Adrift 2013-04-29 15:22:15

1.请提供一个jsfiddle 2. jQuery允许吗？ – 2013-04-29 15:23:46

如果将盒子模型渲染更改为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; 
}

来源

2013-04-29 15:34:35 Timidfriendly

填充！==保证金！你的解决方案与OP想要的不同。 – Christoph 2013-04-29 15:54:35

@timidfriendly比较两个（与钙）http://jsfiddle.net/dj3hh/（与框大小）http://jsfiddle.net/dj3hh/1/ – 2013-04-29 19:48:17

为了完整性;从.fit删除填充权并将其应用到是我相信你正在寻找什么。 – Timidfriendly 2013-05-05 10:09:09

将position: relative父元素，然后做...

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

来源

2013-04-29 18:24:36 Duopixel

CSS3相当于宽度：calc（100％ - 10px）

回答

相关问题