2012-01-23 5 views
-1

는 자동으로 디스플레이가 우리가 CSS를자동 화살표 아이콘

내가 CSS3와 함께 해결책을 발견으로이 문제를 해결할 수 있어야 사업부에 대한 문장 종료 후 파란색 화살표 필요하지만 난 CSS3를 사용할 수 없습니다 이 페이지에서

enter image description here

은 내가 CMS를 사용하고 있으며 서버 측 언어 나 자바 스크립트 내가 그것을 CSS로 수정하기 쉬운 생각

을 쓸 수 없습니다, 추가 및 편집 포함 된 클라이언트가 거기에있다 그러나 나는 그것을 불가능한 것으로 생각하고있다. 지금

데모 Link

+0

가 파란색 화살표 이미지와는 CSS3 솔루션 무엇 – zod

+0

:-) 넣어 것을 얻을? –

+0

p : after {content : "arrow.jpg";} – mikul

답변

1
p:after 
{ 
    content: url('images/blue-arrow.png'); 
} 

해당 위치에있는 파란색 화살표 이미지를 저장 가정.

+0

이것은 IE7에서 작동하지 않습니다 : – mikul

+0

** 라이브 데모 : ** http://jsfiddle.net/uF9fN/1/ –

+0

@mikul 그렇다면 IE7은 화살표를 얻지 못합니다. Problem :] (http://collerage.files.wordpress.com/2011/07/troll-face-problem.jpg)': P' –

1

이것은 최선의 방법은 아니지만 ie7에서 polyfill을 사용하지 않는 유일한 방법은 인라인 요소를 각 p 태그의 끝에 (내부에) 추가하고 적절한 이미지 스타일을 지정하는 것입니다 .

예 :

HTML

<p> Lorem Ipsum... <span class="arrow"></span></p> 

CSS

p span.arrow{ 
    display: inline-block; 
    background: url(img/arrow.png) no-repeat top left; 
    width: XXpx; 
    height: XXpx; 
} 
관련 문제