क्रोम में प्रिंट करते समय डिवी तत्व का आकार बदलता है

Question

मैं एक पृष्ठ लिख रहा हूं जिसका मुद्रित होना है और स्टाइल मेरे आवेदन के बाकी पृष्ठों से अलग है। अनिवार्य रूप से मैं उपयोगकर्ता के लिए प्रिंटिंग जानकारी के साथ वॉलेट कार्ड बनाने की कोशिश कर रहा हूं ताकि प्रिंट, कट और उनके साथ रह सकें।

मैंने क्रोम और आईई के साथ अपने लॉगिन कार्ड को प्रिंट करने का प्रयास किया है। आईई इसे पूरी तरह से प्राप्त करता है लेकिन क्रोम दुर्भाग्य से कार्ड को बहुत बड़ा बनाता है। यह सुनिश्चित नहीं है कि यह महत्वपूर्ण है (मैं एक सीएसएस विशेषज्ञ नहीं हूं) लेकिन मैंने विभिन्न इकाइयों का उपयोग करने की कोशिश की; इंच, पिक्सल, और अंक।

जब मैं क्रोम में डेवलपर टूल का उपयोग करता हूं, तो मुझे लगता है कि पिक्सल की गणना सही ढंग से की जाती है। मैंने यह जांचने के लिए जांच की कि ब्राउज़र 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> 

यहां मेरा सीएसएस स्टाइल है। मैं 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; 
} 

स्वाभाविक रूप से, मैं जहाँ मैं ब्राउज़र विशिष्ट शैली नियमों का एक बहुत उपयोग करने के लिए नहीं है, लेकिन है कि इस मामले में संभव नहीं हो सकता इस के लिए एक क्रॉस ब्राउज़र समाधान किया जाना पसंद करेंगे।

क्या मुझे किसी भी ब्राउज़र के साथ प्रिंट करने के लिए उचित रूप से आकार देने के लिए किसी प्रकार का सीएसएस रीसेट चाहिए?

अद्यतन

क्रोम एक पीडीएफ दस्तावेज़ के रूप में मेरे एचटीएमएल renders जब यह छपा है। मैंने देखा कि क्रोम में प्रिंट संवाद पृष्ठ के शीर्ष पर बस एक मोडल विंडो है। मैंने डेवलपर टूल में तत्वों की जांच की और प्रिंट पूर्वावलोकन एक पीडीएफ दस्तावेज है। एचटीएमएल स्रोत यूआरएल (क्रोम: //my_path/print.pdf) प्रदान करता है जो प्रिंटर द्वारा मुद्रित पूर्ण दस्तावेज़ है।

SO, लंबी कहानी छोटी; मेरा मुद्दा यह प्रतीत होता है कि कैसे क्रोम पीडीएफ के रूप में मेरे एचटीएमएल प्रस्तुत करता है। क्या यह नियंत्रित करने का कोई तरीका है कि यह एचटीएमएल या शायद कुछ क्रोम फ्रेंडली सीएसएस का उपयोग कैसे कर सकता है?

Answer 1

अपने सीएसएस में @media प्रिंट विनिर्देश का प्रयास करें। क्रोम प्रिंट प्रिंट सीएसएस के साथ आपके ऑन-स्क्रीन सीएसएस को ओवरराइड कर रहा है जो मुद्रित पृष्ठ को फिट करने के लिए तत्वों को आकार देता है।

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

मुझे लगता है कि क्रोम पीडीएफ में अनुवाद करने की तुलना में यह मुद्दा होने की अधिक संभावना है।