Mozilla 한국 커뮤니티

익스에서 그냥 보기에서는 제대로 작동하는데 인쇄미리보기에서는 이미지가 왼쪽 정렬이 안되는데요 어느 부분이 문제인지 모르겠습니다.
문제가 되는 부분 좀 찾아 주시면 고맙겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>닷컴</title>	
<style type="text/css">
body {			
	font-family: Gulim, 굴림, Arial, sans-serif;
	background-color: #efefea;
	padding: 0;
	margin: 5px auto;
	line-height: 1.6;
	text-align: center;
}
img  {border: none; cursor: pointer; display: block;}

#wrapper {
	width: 660px;
	margin: 0 auto;
}
#content {
	padding: 80px;
	margin: 5px 0;
	background-color: white;
	border: 1px solid #dbdbdb;
	text-align: justify;
	font-size: 0.75em;
	color: #666;
}
	.img_left {
		margin: 3px 3px 3px 0;
		float: left;
		font-size : 8pt;
		color: #008080;
	}
	.img_110 { 
		width: 110px; 
		border: 0; 
	}
#footer { 
	padding: 10px;
	text-align: right;
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 8pt;
	color: #a0a0a0;
	background-color: #2c2c2c;
	border: 1px solid #dbdbdb;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<span class="img_left">
<img src="http://kr.img.dc.yahoo.com/b9/data/rubbish/DSC06738%286885%29.jpg" class="img_110" alt="" />
<img src="http://kr.img.dc.yahoo.com/b9/data/rubbish/DSC06736%287787%29.jpg" class="img_110" alt="" />
</span>
지난 7일, 여가수 박모씨가 면허가 취소된 상태에서 운전대를 잡았다 불구속 입건되는 사건이 있었다. 이 소식이 전해지면서 인터넷에서는 가수 박모씨가 누구인지 알아내느라 들썩였다.
각 인터넷 포털사이트 인기 검색어에는 '여가수 박모씨''무면허 여가수'와 같은 검색어와 박씨 성을 가진 여가수의 이름이 오르내렸다. 박씨라는 것 외에 나이나, 활동 내역 등에 관한 정보가 전혀 없어 수많은 여가수의 이름이 거론되었다. 
지난 7일, 여가수 박모씨가 면허가 취소된 상태에서 운전대를 잡았다 불구속 입건되는 사건이 있었다. 이 소식이 전해지면서 인터넷에서는 가수 박모씨가 누구인지 알아내느라 들썩였다.
각 인터넷 포털사이트 인기 검색어에는 '여가수 박모씨''무면허 여가수'와 같은 검색어와 박씨 성을 가진 여가수의 이름이 오르내렸다. 박씨라는 것 외에 나이나, 활동 내역 등에 관한 정보가 전혀 없어 수많은 여가수의 이름이 거론되었다. 
지난 7일, 여가수 박모씨가 면허가 취소된 상태에서 운전대를 잡았다 불구속 입건되는 사건이 있었다. 이 소식이 전해지면서 인터넷에서는 가수 박모씨가 누구인지 알아내느라 들썩였다.
각 인터넷 포털사이트 인기 검색어에는 '여가수 박모씨''무면허 여가수'와 같은 검색어와 박씨 성을 가진 여가수의 이름이 오르내렸다. 박씨라는 것 외에 나이나, 활동 내역 등에 관한 정보가 전혀 없어 수많은 여가수의 이름이 거론되었다. 
</div>
<div id="footer"></div>
</div>
</body>
</html>

테스트 해보니 IE에서는 text-align:justify 속성이 적용된 요소 안쪽에 float 된 자식 요소를 print 할 때 잘못 렌더링 하는 버그가 있더군요.

보통은 문제가 없는데 float 된 요소에 width, margin, padding 속성이 들어가거나 또는 그 자식요소(img)에 margin, padding 등이 들어가면 출력할 때 그렇게 됩니다.

문제의 원인은 IE 에서 text-align:justify 속성과 float 된 자식요소 이므로 print 할 때에 이 두가지 속성 가운데 하나를 다른 속성이나 값으로 대체하시면 될 것 같습니다. float 속성은 포기할 수 없으니 간단하게는 text-align 속성의 값을 justify 에서 left 으로 변경하면 될 것 같습니다.

즉, 다음과 같은 코드를 본래의 CSS 코드보다 아래쪽에 적어주어 print 할 때에는 #content 영역에 text-align:left 속성이 적용되도록 하시면 됩니다. 물론 인쇄할 때 좌우측 정렬되지 않고 오른쪽 끝의 정렬이 안맞는 문제가 있긴 합니다.

Code: Select all

[style type="text/css" media="print"]
#content { text-align:left}
[/style]

추가 =============================================

정정(추가)합니다. 이 문제를 다시 테스트 해보니 제가 제시한 조건에서 항상 잘못 렌더링 되는것은 아니더군요. #content 영역에 설정된 padding 값의 단위를 80px 에서 8em 으로만 변경해도 인쇄시 문제가 없군요. ㅡㅜ;; 결국 수사는 다시 혼란으로 빠졌습니다. 저는 범인 잡는거 포기할래요 ㅡㅜ;;

해결하진 못했지만 신경써 주셔서 고맙습니다. ^^

Mozilla 한국 커뮤니티

이미지 정렬이 되지 않는 이유

이미지 정렬이 되지 않는 이유

그동안 몰랐던 IE 버그로군요.

고맙습니다.