Свойство CSS Content не работает в MSIE?

Здесь (ссылка удалена) Я пытаюсь заменить текст в якоре изображением с использованием свойства содержимого CSS. Я предполагаю, что это неправильное поведение для Chrome, чтобы сделать то, что я хочу, чтобы сделать это, заменив текст изображением, которое я предоставляю в коде CSS?Свойство CSS Content не работает в MSIE?

Вот код я использую:

<!-- HTML --> 
<a href="http://www.pegi.info/en/index/global_id/505/?searchString=Assassin%E2%80%99s+Creed%C2%AE+III&submit=Search#searchresults" class="pegi18">PEGI Rating</a> 

<!-- CSS --> 
.pegi18 { 
content: url("http://example.com/path/path/path/18.png"); 
width: 50px; 
height: 61px; 
}

Вот конечный результат в MSIE 11 и Chrome 32 Internet Explorer vs Chrome

Почему изображения не будут отображаться в MSIE? Я также провел тесты на modern.ie.

источник

2014-01-17 dylmye

Все версии IE? Пожалуйста, будьте конкретны. –

Я пробовал ваш сайт в FF, там тоже не работает. Является ли это специфической настройкой Chrome? – Charlie74

, чтобы заменить контент таким образом, является плохой практикой по моему мнению, хром имел такое поведение с тех пор. контент должен использоваться только с псевдоэлементом ... –

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

.pegi18 { 
background: url("http://daylostar.com/img/gwt/pegi/18.png"); 
width: 50px; 
height: 61px; 
}

источник

2014-01-17 18:22:40 Auzi

Благодарим за предоставление решения. Я думал об этом, но я использовал его как quickfix. – dylmye

В любое время. Рад, что это сработает для вас. – Auzi

Причина, почему это не работает, потому что CSS content предназначен для pseduo-элементов, таких как :after и :before

источник

2014-01-17 18:20:22 SkyOut

Согласно the CSS specification:

Применяется:: до и: после того, как псевдоэлементы

Похоже, что Chrome идет против спецификации, разрешив используя это свойство непосредственно на элементе вместо псевдоэлемента :before или :after. Для совместимости с другими браузерами я рекомендую попробовать альтернативный метод, например, использовать элемент <img> или свойство CSS background-image.

источник

2014-01-17 18:21:18

Согласно MDN,

CSS-свойство содержимого используется с :: до и после :: псевдо-элементов для генерации содержимого в элементе.

В вашем случае, это не относится, так что это действительно не должен работать в любом браузере (Chrome, кажется, позволяет, даже если он не соответствует спецификации)

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/content

источник

2014-01-17 18:23:53 Charlie74

Свойство CSS Content не работает в MSIE?

ответ

Смежные вопросы