CSS3 эквивалентно ширине: calc (100% - 10px)

Я ищу альтернативу миграции моего CSS - уже работаю над FF и Chrome - потому что QtWebKit не предоставляет некоторую функцию CSS3 yeat.

У меня есть следующие вещи:

.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()

Ответы

Ответ 1

Если вы измените рендеринг модели коробки на box-sizing: borderbox, то дополнение будет включено в общую ширину вместо того, чтобы быть добавленным к ней. В этом примере я предполагаю, что вы добавляете класс в элементы упаковки.

.fit { 
    width:100%
    padding-right:10px
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;     
    box-sizing: border-box; 

}

Поддержка браузера очень хороша; все современные браузеры. Только вам понадобится polyfill для IE7 и ниже.

Для получения дополнительной информации: paulirish.com/2012/box-sizing-border-box-ftw/

EDIT:

Это решение, которое, как я считаю, полностью соответствует вашему краткому изложению, см. скрипту: 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;
}

Ответ 2

Поместите position: relative в родительский элемент, затем выполните...

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