IE 9 CSS градиент с фоновым изображением не работает - PullRequest
Новая
       17

IE 9 CSS градиент с фоновым изображением не работает

2 голосов
/ 24 декабря 2011

Я использую этот код, он отлично работает в Chrome и Firefox, но не в IE9.и в соответствии с этой страницей Несколько фонов и background-size поддерживается в IE9 

span.select {
    position: absolute;
    bottom: 0;
    float: left;
    left: 0;
    line-height: 1;
    text-indent: 10px;
    background: #ffffff;
    background: url(../img/color-arrow.png) no-repeat, linear-gradient(top, #ffffff 0%,#a9a9a9 100%);
    cursor: default;
    z-index: 1;
    border: #dadada 1px solid;
    border-radius: 4px;
    background-position: 100% center;
    background-size: 1.5em 0.6em, 100% 100%;
    text-shadow: 0px 1px 1px #fff;
    white-space: nowrap }

Я использую несколько фонов и изменение размера фона в нем

Ответы [ 2 ]

2 голосов
/ 24 декабря 2011

IE9 поддерживает несколько фоновых изображений , но не сочетание нескольких фоновых элементов. Ваша проблема - изображение И градиент.

Кроме того, -ms- ничего не делает для совместимости с CSS для любого свойства.

2 голосов
/ 24 декабря 2011

IE9 не поддерживает градиенты. IE10 поддерживает их без префикса . Однако IE9 реализовал SVG.

Я бы рекомендовал использовать редактор градиентов colorzilla . Чтобы использовать SVG в качестве запасного варианта, просто установите флажок «Поддержка IE9».

Если вам действительно нужны градиенты в IE8 (что не нужно, потому что они должны использоваться только для прогрессивного улучшения), вы можете использовать Свойство собственного фильтра IE , но будьте осторожны, потому что он очень глючит.

...