Фоновые изображения и градиент для IE10

У меня есть несколько фонов с градиентом, и он работает для Firefox, Chrome и Safari с определенными медиа-запросами для мобильных устройств.

Как обычно проблема в Internet Explorer. Раньше у меня была условная таблица стилей для IE, в которую я просто загружал одно фоновое изображение, но, насколько мне известно, IE10 не поддерживает ‹ !--If IE--> в моем CSS.

В идеале я хотел бы, чтобы градиент css3 и отдельные фоновые изображения работали во всех браузерах, я был счастлив использовать одно фоновое изображение для всех браузеров IE, но пока одно фоновое изображение не работает для IE.

CSS в основном стиле.css

    body{
    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));

    background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);

    background-attachment:fixed;
    background-position:top right, top left, center bottom,  bottom right,  left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-color:#509deb;
    display:block;}

CSS для Internet Explorer: style-ie.css

    font:14px 'questrialregular', Arial, Helvetica, sans-serif;
    margin:0;
    width:100%;
    color:#797979;

    background-image: url('img/bknd_full_img.jpg');
    background-attachment:fixed;
    background-position:center top;
    background-repeat: no-repeat;
    background-color:#fff;
    display:block;  
}

image css background internet-explorer-10
person conor909    schedule 27.11.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что вы даете градиент и множественный фон только WebKit (используя старый синтаксис) и Firefox (используя немного более новый синтаксис). Ни IE, ни Opera не могут отображать градиенты или несколько фонов, поскольку вы не указываете их префиксы или версию без префикса.

IE10 реализует градиенты с использованием последнего и окончательного синтаксиса без префиксов. Последняя версия Opera тоже, как и недавний Firefox. IE10 не нуждается в вашем коде условного комментария, так как он будет работать так же, как и другие браузеры.

Радиальный градиент должен стать примерно таким:

background-image: 
    url(../img/bknd_img1.png),
    url(../img/bknd_img2.png),
    url(../img/bknd_img3.png),
    url(../img/bknd_img4.png),
    url(../img/bknd_img5.png),
    radial-gradient(circle closest-side at center, #c0deff, #509deb);

Более подробную информацию об изменениях синтаксиса можно найти в блоге IE [0] и в спецификации [1].

[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx , [1] http://dev.w3.org/csswg/css3-images/#radial-gradients

person David Storey    schedule 14.12.2012