Метод css/Less calc() разрушает мой IE10

Я пытаюсь получить высоту в div, чтобы быть ровно на 55 пикселей меньше, чем родительский div.

Я попытался сделать это: height: calc(~"100% - 55px"); меньше, чем это создает: height: calc(100% - 55px);

Это отлично работает в Chrome и Firefox, но сбой в IE10.

Это не то, что он не работает, но он сбрасывает его. Это очень странно, я пытался найти какую-то информацию в сети, но ничего не вижу.

Кроме того, это происходит только с высотой. Если бы я использовал метод calc() по ширине, он отлично работал.

Любая идея о том, как я могу разобраться в этом?

Ответ 1

Я нашел проблему. Была высота: наследовать внутри одного из внутренних div. Ясно, что IE очень запутан на этом, поскольку значение вычисляется и, по-видимому, не наследуется. Все хорошо.

Итак, вы не можете сделать что-то вроде этого:

<div style="height:100%">
  <div style="height: calc(100% - 50px)">
    <div style="height:inherit">
    </div>
  </div>
</div>

если вы проиграете IE10, вот пример: http://jsfiddle.net/wyRXp/1/

здесь я вынул высоту наследования: http://jsfiddle.net/wyRXp/2/ и он отлично работает.

Оба над примерами отлично работают в Firefox и Chrome

Ответ 2

Известна проблема с calc() в IE10

Internet Explorer (в соответствии со спецификацией) не принимает вычисления без пробелов для добавлений/вычитаний (т.е. calc (100% -30px) недействителен, но calc (100% - 30px) работает нормально).

Обратитесь к CanIUse.com.

Наиболее вероятная причина вашего сбоя заключается в том, что Меньше удаляет пробелы при выходе из значения.