Ошибка функции css calc в IE

ИЗМЕНИТЬ

Как отметил в своем ответе @Joe, проблема здесь с IE не имеет ничего общего с медиа-запросами.

Поэтому я обновил старый заголовок: ( "медиа-запросы GLITCH в IE" ) с текущим. (спасибо также некоторым мета консультациям)

Чтобы быть уверенным, я создал новый FIDDLE, содержащий только функцию calc, и низкий и созерцательный - Я вижу то же (плохое) поведение в IE, как и в своей оригинальной скрипке, с медиа-запросами.

Кроме того, одно интересное замечание, которое я заметил, это то, что это происходит только тогда, когда я использую деление в операции calc, но если я использую что-то более простое, например calc(100% - x px) - IE обрабатывает все в порядке.

Я использую media queries, чтобы оправдать список ящиков.

В основном, я настроил медиа-запрос для каждого состояния #columns, где затем я использую calc(), чтобы выработать margin-right для каждого из элементов (кроме тех, что указаны в последнем столбце).

Здесь fiddle

Теперь это отлично работает в chrome и firefox - но когда я запускаю это в IE9 +

Я вижу сбой между состояниями медиа-запросов (включая мерцание и непонимание медиа-запросов).

Вот скриншот того, что я говорю о

[снимок экрана, сделанный при ширине окна браузера 710px]:

enter image description here

Является ли это ошибкой IE или я сделал что-то неправильно?

ОТВЕТЫ

Ответ 1

FIX:

вот гладко работающий jsfiddle моего решения

Дальнейшее исследование математики, в которой у меня возникло подозрительный интернет-исследователь, с трудом пытается сделать что-то глупое (что еще новое), и это должно было позволить десятичные значения, т.е. margin-left: 250.123px; тем самым вызывая ОЧЕНЬ мелкие несоответствия и разрушая ваш макет.

чтобы исправить эту проблему, я временно вычитал 1px из всех ваших вычислений, и все выглядит гладко, как может быть

@media (max-width: 350px) {
  .container > div {
    margin-left: calc(((100% - 150px)/2) - 1px);
    margin-right: calc(((100% - 150px)/2) - 1px);
    background:black;
  }
}

@media (min-width: 350px) and (max-width: 550px) {
  .container > div {
    margin-right: calc((100% - 300px) - 1px);
    background:red;
  }
  .container > div:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 550px) and (max-width: 750px)  {
  .container > div {
     margin-right: calc(((100% - 450px) / 2) - 1px);
    background:purple;
  }
  .container > div:nth-child(3n) {
    margin-right: 0;
  }
}

@media (min-width: 750px){
  .container > div {
    margin-right: calc(((100% - 600px) / 3) - 1px);
  }
  .container > div:nth-child(4n) {
    margin-right: 0;
  }
}

ИЗМЕНИТЬ:

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

взгляните на обновленную скрипту

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

Я столкнулся с несколькими проблемами с медиа-запросами, то есть... несколько ошибок, о которых стоит упомянуть,

режим совместимости - убедитесь, что это отключено, может привести к неожиданному поведению или просто повредить запросы мультимедиа.

doctype - не объявление одного или не имеющего html5-doctype может быть причиной еще большего несоответствия в запросе медиа

<!DOCTYPE html>

ive заметила, что вы используете calc(), моя первая реакция заключалась в том, чтобы убедиться, что все математические операторы окружены пробелом... это еще одна проблема, с которой столкнулся ive, где

calc(2px+5px)

имеет тенденцию к сбою, когда правильный синтаксис должен быть

calc(2px + 5px)