Chrome에서 인쇄 할 때 Div 요소 크기가 변경됩니다.

인쇄용 페이지를 쓰고 있으며 응용 프로그램의 나머지 페이지와 스타일이 다릅니다. 본질적으로 나는 사용자가 인쇄, 잘라 내기 및 보관할 로그인 정보가있는 지갑 카드를 만들려고합니다.Chrome에서 인쇄 할 때 Div 요소 크기가 변경됩니다.

나는 크롬과 IE로 로그인 카드 인쇄를 시도했습니다. IE는 완벽하지만 크롬은 불행히도 카드를 너무 크게 만듭니다. 중요하다면 (나는 CSS 전문가는 아니지만) 다른 단위를 사용해 보았습니다. 인치, 픽셀 및 포인트.

크롬에서 개발자 도구를 사용하면 픽셀이 올바르게 계산됩니다. 나는 브라우저가 div 안에 추가 패딩을 추가했는지 확인했다.

다음은 로그인 카드 요소입니다.

<div id="divLoginCard"> 
    <div id="divLoginCardHeader"> 
     <h3>User Login - <span id="spnUserName"></span></h3> 
    </div> 
    <div id="divLoginCardContent"> 
     <div class="fieldRow"> 
      <span class="fieldLabel">Website:</span> 
      <span class="fieldValue">http://www.xxx.zzz</span> 
     </div> 
     <div class="fieldRow"> 
      <span class="fieldLabel">ID:</span> 
      <span class="fieldValue" id="spnUserID"></span> 
     </div> 
     <div class="fieldRow"> 
      <span class="fieldLabel">Contact's Name:</span> 
      <span class="fieldValue" id="spnContactsName"></span> 
     </div>   
    </div> 
</div>

여기 내 CSS 스타일링입니다. 나는 표준 미국 명함 크기 인 3.5 "x 2"의 실제 크기를 얻으려고 노력하고 있습니다. 내가 브라우저 특정 스타일 규칙을 많이 사용하지 않아도하지만이 경우에는 가능하지 않을 수있는 위치

#divLoginCard 
{ 
    margin:0 auto; 
    width:252pt; 
    height:144pt; 
    border-style:dashed; 
    border-color:gray; 
} 

#divLoginCardHeader 
{ 
    text-align:center; 
} 

#divLoginCardContent 
{ 
    margin-left:25px; 
    margin-right:15px; 
    padding-top:15px; 
} 

.fieldRow 
{ 
    margin-bottom: 3px; 
    display: table; 
    width: 100%; 
} 

.fieldLabel 
{ 
    font-weight: bold; 
    width: 96px; 
    text-align: left; 
    display: table-cell; 
} 

.fieldValue 
{ 
    min-width: 100%; 
    display: table-cell; 
    word-wrap: break-word; 
    width: 200px; 
} 

body 
{ 
    font-family:Arial; 
}

당연히, 나는 이것에 대한 크로스 브라우저 솔루션을 선호하는 것이다.

브라우저로 인쇄 할 때이 크기를 올바르게 조정하려면 일종의 CSS 재설정이 필요합니까?

UPDATE

인쇄시 크롬은 PDF 문서로 내 HTML을 렌더링합니다. 크롬의 인쇄 대화 상자가 단순히 페이지 상단의 모달 창이라는 것을 알았습니다. 개발자 도구에서 요소를 체크 아웃하고 인쇄 미리보기는 pdf 문서입니다. html은 프린터에서 인쇄하는 전체 문서 인 원본 URL (chrome : //my_path/print.pdf)을 제공합니다.

길이가 짧습니다. 내 문제는 크롬이 내 HTML을 pdf로 렌더링하는 방법 인 것 같습니다. HTML을 렌더링하는 방법이나 사용하기 쉬운 크롬 친화적 인 CSS를 제어하는 방법이 있습니까?

출처

2013-01-24 jlafay

1) CSS 재설정을 권장합니다. 2) 인쇄 할 때 카드가 너무 큽니까? 아니면 화면에 Chrome이 너무 큽니까? 3) 'pt'가 아닌 'mm'측정 값을 사용하는 것이 좋습니다 (Chrome의 "pt"가 IE9보다 1.7 배 빠름). – Sean

해결 된 적이 있습니까? 나는 같은 문제가있다. –

@KevinSwarts, 불행히도 없습니다. 나는 서버에서 pdf 문서를 생성하고 인쇄 대신 클라이언트에 보냈다. 일관성있게 유지할 수있는 유일한 방법이었습니다. 그것은 내가 선호하는 해결책이 아니었지만해야 할 일이었습니다. – jlafay

CSS에서 @media 인쇄 사양을 사용해보십시오. Chrome은 인쇄 CSS에 요소를 인쇄 된 페이지에 맞게 크기를 조정하는 화면 CSS를 무시하는 것 같습니다.

@media print { 
    /* put your fixes here */ 
}

크롬이 pdf로 번역하는 것보다 문제가 될 가능성이 더 많습니다.

출처

2013-04-10 17:58:34 Deborah

제안 해 주셔서 감사 드리지만 용지 인쇄 블록 안에 제 스타일을 배치하는 것도 효과가 없습니다. – jlafay

Chrome에서 인쇄 할 때 Div 요소 크기가 변경됩니다.

답변

관련 문제