Странная граница масштабированного SVG в IE10 и 11
Я хочу отобразить список значков SVG. Это работает во всех браузерах, кроме IE 10 и 11. IE добавляет странный невидимый отступ вокруг SVG.
Я поместил значки SVG в такой список:
<ul class = "c-category-list">
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
</ul>
Мой css (sass) выглядит так:
.c-category-list
padding: 0;
margin: 0;
list-style: none;
&__item{
display: inline-block;
}
&__image {
height: 4em;
}
}
Я сделал код для отладки: https://codepen.io/anon/pen/JZLaae
В других браузерах (Firefox, Chrome и т. д.) Он показывает вывод, как показано ниже:
Но в IE11 и IE10 все значки имеют отступы друг от друга. Результат выглядит следующим образом:
спасибо, но это не работает
а margin:0 ??
Нет, я не думаю, что это фактическое поведение полей или отступов, но что-то, что требует больше места. Немного похоже на ошибку IE.
я не вижу места в IE, извините
Ответы 4
1) Само изображение имеет больше места между левым и правым. Таким образом, он показывает пространство между изображениями. Попробуйте обрезать изображение и попробуйте еще раз, пространство будет удалено.
2) После обрезки изображений с помощью display: inline-block; между изображениями будет пробел по умолчанию. Предлагаемый способ - использовать с display: flex.
Да, я знаю. Но в IE11 / 10 места намного больше, чем в других браузерах. Думаю, дело не в пространстве на изображении. Я тоже пробовал сгибать.
Используйте display: inline;, кажется, что IE по-другому обрабатывает inline-block.
Вот последний SCSS:
$component: "c-category-list";
.#{$component} {
padding: 0;
margin: 0;
&__item{
display: inline;
}
&__image {
height: 4em;
background: red;
}
}
Результат с скомпилированным SCSS должен выглядеть следующим образом:
.c-category-list {
padding: 0;
margin: 0;
}
.c-category-list__item {
display: inline;
}
.c-category-list__image {
height: 4em;
background: red;
}<ul class = "c-category-list">
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
<li class = "c-category-list__item">
<a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a>
</li>
</ul>Вот ссылка на Codepen: https://codepen.io/anon/pen/pKLqWe
Извините, но я все еще вижу больше места вокруг элементов в IE11 / 10. Сравните этот код в Chrome en IE10 / 11 для лучшего примера: codepen.io/anon/pen/wXmYOj
@Royw Я обновился. Что теперь?? Думаю, на этот раз он работает.
Я опубликовал обходной путь самостоятельно, но это намного лучше. Спасибо!
@Royw Больше обновлений здесь: codepen.io/anon/pen/MXVzGa. Может вам понравится и именно то, что вы хотели.
Это причуда IE, не уверен, есть ли лучший способ, но мне приходилось решать ее, указав ширину и высоту svg в прошлом.
.c-category-list {
padding: 0;
margin: 0;
list-style: none;
}
.c-category-list__item {
display: inline-block;
}
.c-category-list__image {
width: 4em;
height: 4em;
}<ul class = "c-category-list">
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
<li class = "c-category-list__item"><a href = "#" class = "c-category-list__link"><img src = "https://image.flaticon.com/icons/svg/912/912316.svg" alt = "" class = "c-category-list__image"></a></li>
</ul>Хорошо, похоже, что это ошибка в IE или что-то в этом роде, но пока я нашел обходной путь. Вместо того, чтобы напрямую изменять размер SVG, я установил фиксированную высоту родительского элемента и дал SVG 100% высоту. Кажется, это работает.
.image-wrapper {
display: inline-block;
background: red;
margin: 0;
height: 4em;
}
.image {
height: 100%;
}
Кодовое отверстие: https://codepen.io/anon/pen/RJMqLM
попробуйте
padding: 0;в&__item