Thay đổi kích thước phần tử Div khi in trong Chrome

Question

Tôi đang viết một trang có nghĩa là in và tạo kiểu khác với phần còn lại của các trang trong ứng dụng của tôi. Về cơ bản, tôi đang cố gắng tạo một thẻ ví với thông tin đăng nhập để người dùng in ra, cắt và giữ chúng.

Tôi vừa thử in thẻ đăng nhập bằng chrome và IE. IE nhận được nó hoàn hảo nhưng chrome không may làm cho thẻ quá lớn. Không chắc chắn nếu nó quan trọng (tôi không phải là một chuyên gia CSS) nhưng tôi đã thử sử dụng các đơn vị khác nhau; inch, pixel và điểm.

Khi tôi sử dụng công cụ nhà phát triển trong chrome, tôi thấy rằng các pixel được tính toán chính xác. Tôi đã kiểm tra xem liệu trình duyệt có thêm phần đệm bổ sung bên trong div hay không.

Dưới đây là những gì tôi có cho các yếu tố thẻ đăng nhập.

<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> 

Đây là kiểu CSS của tôi. Tôi đang cố gắng để đạt được kích thước vật lý 3,5 "x 2" là kích thước thẻ kinh doanh tiêu chuẩn của Hoa Kỳ.

#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; 
} 

Đương nhiên, tôi muốn có giải pháp trình duyệt chéo cho điều này mà tôi không phải sử dụng nhiều quy tắc kiểu trình duyệt cụ thể nhưng điều này có thể không thực hiện được trong trường hợp này.

Tôi có cần một số loại đặt lại CSS để kích thước đúng cách này để in bằng bất kỳ trình duyệt nào không?

CẬP NHẬT

Chrome render html của tôi như là một tài liệu PDF khi nó được in ra. Tôi nhận thấy rằng hộp thoại in trong chrome chỉ đơn giản là một cửa sổ phương thức ở đầu trang. Tôi đã kiểm tra các yếu tố trong các công cụ phát triển và bản xem trước bản in là một tài liệu pdf. Html cung cấp URL nguồn (chrome: //my_path/print.pdf) là tài liệu đầy đủ được in bằng máy in.

SO, truyện dài; vấn đề của tôi có vẻ là cách chrome hiển thị html của tôi dưới dạng pdf. Có cách nào để kiểm soát cách nó hiển thị html hoặc có thể một số CSS thân thiện với Chrome mà tôi có thể sử dụng không?

Answer 1

Hãy thử đặc tả in @media trong CSS của bạn. Chrome có thể ghi đè CSS trên màn hình của bạn bằng CSS in có kích thước các yếu tố để vừa với trang được in.

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

Tôi nghĩ đây có thể là vấn đề mà Chrome đang dịch sang pdf.