CSS코드만으로 인용문 blockquote 만들기

티스토리에서는 상단의 따옴표를 클릭하면 한 영역을 인용문형태로 만들수 있습니다.

css 에서도 blockquote 를 처리하는 코드가 있는데 이걸 이미지가 없이 CSS 코드만으로 그럴싸하게 만들수 있습니다. 
코드는 아래와 같습니다.

blockquote { 
	padding-top: 20px; 
	overflow: hidden; 
	line-height: 150%; 
	color: #454545; 
}
blockquote:before { 
	display: block; 
	float: left; 
	margin: 10px 15px 0 0; 
	font-size: 100px; 
	content: open-quote; 
	color: #bababa; 
	text-shadow: 0 1px 1px #909090; 
}
blockquote:after { 
	content: none; 
}

테스트로 제가 적용한걸 이미지로 보여드리겠습니다.

어떻습니까 그럴싸하죠....

브라우져 호환성.

파이어폭스와 IE8 이상에서는 정상적으로 보입니다.
하지만 웹킷 엔진을 사용하는 크롬,사파리 그리고 오페라는 아래처럼 보입니다.
 

그리고 IE7이하에서는 보이지 않습니다.
그래서 본문과 구별되도록 border 를 사용하면 좋습니다.