:after, :before를 이용하면 box모델을 쉽게 만들 수 있을 것 같기에
간단히 웹페이지(http://kj21.org/test.htm)를 만들었는데요.
IE 6, FF 1에서 너무 다르게 보입니다.
FF에서는 원하는 모양으로 나오는데, IE에서는 쌩뚱맞은 모양이 나옵니다.
궁금합니다.
현 IE6 상황에서는 :after, :before를 사용할 수 없나요?
아니면 제 소스에 문제가 있나요?
게시판의 성격에 맞지 않은 글이더라도 답변해주시면 감사하겠습니다.
FF1 에서 본 모습
http://kj21.org/testimg0312_2.gif
IE6 에서 본 모습
http://kj21.org/testimg0312.gif
관련 소스
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>무제 문서</title>
<style type="text/css">
<!--
body {margin: 50px;}
.conBox { background:url(/ver3/img/bg/orange2/2.gif) repeat-y; font-size:12px; color:#336699; width:590px;}
.conBox:before {content: ""; background:url(/ver3/img/bg/orange2/1.gif) no-repeat;height:10px; display:block;}
.conBox:after {content: ""; background:url(/ver3/img/bg/orange2/3.gif) no-repeat;height:10px; display:block;}
-->
</style></head>
<body>
<div class="conBox"><p style="margin:20px; ">가나다라마바사</p></div>
</body>
</html>
