SVG в качестве фоновых изображений неправильно отображаются в IE9

Question

Я использую файлы SVG в качестве фона для своих HTML-элементов. Он отлично работает во всех основных браузерах. Проблема в том, что мой сайт также должен корректно работать и выглядеть в Internet Explorer 9. В IE9 фоны SVG всегда «перемещаются» вправо и обрезаются, как показано ниже:

enter image description here

Элемент выше является тесной связью с модальным окном. Структура и стили закрывающей ссылки:

HTML

<a href="#" class="aq-modal-close"></a>

CSS

.aq-modal-close {
        display: block;
        width: 12px;
        height: 12px;
        background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
        background-size: 12px 12px;
        float: right;
        margin-top: 5px;
    }

Файл SVG больше, чем должен, поэтому я использую background-size для его настройки. Другие SVG используются таким же образом. Любые идеи, что может быть не так? Опять же, это происходит только в IE9.

html css svg internet-explorer-9 background-image

0

lesssugar 3 Мар 2015 в 12:06

Как вы создали свой SVG? Использовали ли вы параметр Responsive при экспорте из Adobe Illustrator?

–

Mike Vranckx

3 Мар 2015 в 12:09

1

Проверьте, это может помочь вам ссылка на предыдущий вопрос

–

zeidanbm

3 Мар 2015 в 12:11

Спасибо за комментарии. Я знаю о проблеме создания SVG, но не могу на это повлиять, так как изображения предоставляет дизайнер. Я надеялся, что это проблема со стилем, но, думаю, мне придется связаться с парнем.

–

lesssugar

3 Мар 2015 в 12:17

Answer 1

Вы можете добавить background-position с отрицательными значениями: ДЕМО

.close {
    display: block;
    width: 52px;
    height: 52px;
    background: url('image.svg') no-repeat 0 0 scroll;
    background-size: 52px;
    background-position: -10px 0px;
    border: 1px solid black;
}

0

Persijn 3 Мар 2015 в 13:40

Конечно, я мог бы это сделать, но это означало бы наличие определенного CSS только для IE9. Если есть способ избежать таких взломов, я пойду на это. Собственно, у меня есть ответ на вопрос. Опубликую через минуту.

–

lesssugar

3 Мар 2015 в 14:31

«Однако я не имею на это никакого влияния, так как изображения предоставлены дизайнером». Вы сказали, что не можете изменить изображения? Мое решение было специфичным для IE9, потому что ваш вопрос был таким же.

–

Persijn

3 Мар 2015 в 15:04

Answer 2

Как отметил @zeidanbm в комментарии выше, ответ на проблему был в старом сообщении: Размер фона с сжатым SVG в IE9-10.

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

0

Community 23 Май 2017 в 13:09

SVG в качестве фоновых изображений неправильно отображаются в IE9

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

html