CSS - проблема IE9 с фоновым изображением с линейным градиентом (сгенерированным svg) не повторяется правильно

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

Вот код, который работает в Chrome, Firefox и IE10+.

HTML-код

CSS-код

.low {
  width: 113px;
  height: 14px;
  background-color: red;
  background-image: linear-gradient(to right, white 50%, transparent 0);
  background-size: 4px;
  background-repeat: repeat;
}

Мне нужен запасной вариант для IE9. Как вы можете видеть в скрипте, я уже сгенерировал SVG-изображение, которое работает с IE9. На данный момент размер div составляет 113 x 14 пикселей, а размер фона — 4 пикселя.

Проблема в том, что если ширина> 113, полосы больше не отображаются, а вместо этого отображается только цвет фона. Если вместо этого я установлю более высокую высоту в какой-то момент, полосы снова будут четко отображаться.

Как я могу это решить? С чем это связано? Любая помощь приветствуется.


css background-image internet-explorer-9 background-repeat background-size
person Lezard    schedule 04.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я исправил это

background-size: 4px 4px;

Теперь я собираюсь копаться в документах, чтобы найти, почему.

person Lezard    schedule 04.08.2016