CSS содержимого и совместимость с IE
Я вставил иконку с изображением внутри.
В хроме я вижу значок
Но в IE иконка пропадает.
Вот мой CSS
<div class = "infoIcon"></div>
.infoIcon {
content: url('/assets/img/info-sign.png');
background-color: #919191;
width:15px;
border-radius: 8px;
margin-left:10px;
display: inline;
vertical-align: sub
}
Ответы 2
В css «контент» применяется к псевдоселекторам :: before и :: after.
Что касается того, почему Chrome показывает изображение, в большинстве случаев Chrome имеет тенденцию быть гибким с синтаксисом css. IE и FireFox не показывают изображение, потому что это неправильный синтаксис.
Редактировать: Пример Если вы хотите сохранить «контент», вам придется переместить свой контент в .:до
.icon:before{
content: url('src');
}
Однако вам нужно масштабировать изображение до нужного размера. (Библиотеки значков используют шрифты, где они могут легко изменить размер шрифта)
Второй вариант - продолжить, как сейчас, но переключиться на фоновое изображение.
.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}
Вы можете использовать одну из многих уже существующих библиотек значков. Как и FontAwesome, если нет, то я сфабриковал пример, где он работает!
или просто используйте эти псевдоселекторы.
Он показывает это сейчас, но ширина не применяется к изображению. Я получаю это в реальном размере
Извините за недоразумение, добавил соответствующие примеры для решения проблемы. Запутался, выполняя другие задания!
вы можете добиться этого с помощью объекта HTML.
.infoIcon {
font-size: 40px;
}<div class = "infoIcon">ⓘ</div>Спасибо, но на фото должно быть "я"
Спасибо, но что может быть решением?