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）

回答

相關問題