Функция jquery CSS calc ()

Question

я наткнулся на эту страницу CSS LINK я не мог не любить идею об этом, чтобы вычислить результат различных единиц ... Однако я попробовал это:

$('selector').css({'width':'calc(100%-20px)'});

но это не работает ... у кого-нибудь есть идеи, как это работает, или почему это не работает?

Answer 1

jQuery поддерживает calc (). Я использовал это так много раз:

1. $(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)');

2. $(".content-section").css('width','calc(100% - 15px)');

Answer 2

jQuery не поддерживает значение calc(), равно как и ни один из текущих браузеров.

См. Сравнение здесь: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29

В вашем примере вы можете просто использовать поля на внутреннем элементе:

<div class="parent"><div class="elem"></div></div>

.parent{
    width:100%;
    background:green;
}
.elem{
    margin: 0 10px;
    background:blue;
}

Таким образом, .elem будет иметь ширину 100% - 20 пикселей.

Answer 3

Некоторые части CSS3 хорошо поддерживаются. Других частей нет. Поэтому он был разбит на модули, которые находятся на различных этапах согласования и реализации . Мы далеки от того, чтобы иметь полный спектр спецификаций CSS3, не говоря уже о широкой поддержке браузеров.

Таким образом, CSS Level 3 Selectors - это самая стабильная спецификация, разработавшая Рекомендацию и реализованная довольно многими браузерами и другими инструментами (хотя все же для того, чтобы все основные браузеры хорошо ее поддерживали, потребуется некоторое время). Несколько других PR и CR имеют достаточную поддержку в последних браузерах, чтобы представлять интерес.

Но «Значения и Единицы CSS3» все еще только на начальном этапе рабочего проекта, и, скорее всего, они значительно изменятся до достижения Рекомендации. Фактически, учитывая, что ни один браузер не реализовал calc() с тех пор, как проект был начат несколько лет назад, на данный момент маловероятно, что эта функция станет стандартной. Если вы хотите остаться в сфере хорошо поддерживаемых вещей, вам нужно придерживаться CSS 2.1.

Между тем, говоря что-то вроде 100%-20px, нужно делать с вложенными элементами, полями и отступами.

Answer 4

Ответ Рави Вермы правильный.

Я хотел бы добавить причину, по которой ваш код не работал. При выполнении сложения и вычитания с помощью calc необходимо использовать пробел перед оператором и после него.

С Документы MDN :

Операторы + и - всегда должны быть окружены пробелами. Например, операнд calc (50% -8px) будет проанализирован как процент, за которым следует отрицательная длина, недопустимое выражение, а операнд calc (50% - 8px) - это процент, за которым следуют знак минус и длина. , Более того, calc (8px + -50%) рассматривается как длина, за которой следуют знак плюс и отрицательный процент. Операторы * и / не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.