Calc() разбивает IE 9 при установке на фоновое положение

Я использую calc() для размещения изображения 10px справа от реагирующего контейнера. У меня есть объявление вроде:

background-position: calc(100% - 10px) 6px;

Всякий раз, когда я пытаюсь:

загружать CSS на страницу обычно или
введите его через Инструменты разработчика

IE 9 полностью сработает. Никаких ошибок в Инструментах разработчика, просто прямо к сбою. Это работает во всех других (будущих) браузерах, но моя цель - также поддерживать IE 9.

calc(), похоже, отлично работает с другими свойствами, такими как margin и width. Вот полный след CSS связанного элемента:

Здесь он установлен на 98%, но когда я использую calc на background-position-x (как показано выше), IE 9 сработает.

Спасибо!

Ответы

Ответ 1

В качестве альтернативы calc() вы можете использовать ключевые слова top/right/bottom/left, чтобы указать разные ребра (а не по умолчанию верхние левые), из которых можно смещать свой фон содержание.

background-position: right 10px top 6px; /* 10px from the right, 6px from the top */

http://www.w3.org/TR/css3-background/#the-background-position

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

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

Если вы предпочитаете calc(), но хотите предотвратить отказ старых браузеров, вы можете определить резервное значение (calc() не поддерживается для background-position в IE9 -).

background-position-x: 98%;
background-position-y: 6px;
background-position: calc(100% - 10px) 6px;

Ответ 2

Вид выстрела в темноте. Но, возможно, попробуйте:

background-position: expression(100% - 10px) 6px;

FYI: Я не очень опытен с выражением(). Однако я использовал его в прошлом для достижения аналогичной цели в мобильном браузере. Возможно, это сработает для вас в IE.

Ответ 3

Я нашел эту статью Позиционирование фона из элементов в нижнем правом углу

Таким образом, решение для вашей проблемы будет выглядеть примерно так:

background-position: 6px right 10px;

Ответ 4

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

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

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

Надеюсь, это поможет кому-то!