CSS Content 속성이 MSIE에서 작동하지 않습니까?

여기 (링크가 제거됨) CSS 콘텐츠 속성을 사용하여 앵커의 텍스트를 이미지로 대체하려고합니다. 나는 CSS 코드에서 제공하는 이미지로 텍스트를 대체하여 Chrome이 원하는대로 할 수있는 불규칙한 동작을하고 있다고 생각합니다. 여기CSS Content 속성이 MSIE에서 작동하지 않습니까?

코드는 내가 사용하는 것 : 이미지가 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)와 Internet Explorer vs Chrome

크롬 (32)에인가? 나는 현대에 대한 테스트도했다. CSS content이 the CSS specification에 따르면 :after 및 :before

출처

2014-01-17 dylmye

모든 버전의 IE? 구체적으로 기재하십시오. –

FF로 사이트를 시도했지만 거기에서도 작동하지 않습니다. Chrome과 관련된 설정입니까? – Charlie74

이 방법으로 내용을 대체하는 것은 나 자신의 의견으로는 나쁜 습관입니다. 내용은 단지 의사 요소와 함께 사용해야합니다. –

나는 GCYrillus에 동의하며 나도 나쁜 습관이라고 생각하며 모든 브라우저에서 작동하지 않을 수도 있습니다 (귀하의 게시물이 제안한대로). 클래스를 기반으로 그림을 제어하려면 content 속성 대신 배경 그림을 추가하십시오. MDN 따르면

.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

이 작동하지 않는 이유는 다음과 같습니다 :

은 적용 전 : 후 유사 요소

Chrome이 허용 기준에 위배되는 것처럼 보입니다. 이 속성을 :before 또는 :after 의사 요소 대신 직접 요소에 적용합니다. 다른 브라우저와의 호환성을 위해 <img> 요소 또는 background-image CSS 속성을 사용하는 등 다른 방법을 시도해 보는 것이 좋습니다.

출처

2014-01-17 18:20:22 SkyOut

같은 pseduo 요소에 대한 의미하기 때문에

출처

2014-01-17 18:21:18