आईई 7 और आईई 8 में मेरी प्रिंट शैलियों को क्यों नहीं दिया जा रहा है?

Question

2 स्टाइलशीट के साथ एक वेबपृष्ठ शामिल किया जा रहा है:

<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="/assets/css/print.css" type="text/css" media="print" /> 

प्रिंट शैलियों के साथ क्रोम, सफारी, फ़ायरफ़ॉक्स, और IE9, लेकिन पूरी तरह IE7 और IE8 में टूट जाता है ठीक काम करते हैं। कुछ छवियां जिन्हें छुपाया जाना चाहिए, वे नहीं दिखने वाले अन्य नहीं हैं। यह एक गड़बड़ की तरह दिखता है, इस तथ्य के बावजूद कि यदि मैं आईई 7 और आईई 8 में स्क्रीन के लिए दोनों स्टाइलशीट लोड करता हूं, तो सब ठीक वैसे ही दिखता है जैसा मैं उम्मीद करता हूं।

दुर्भाग्य से मैं पृष्ठ से लिंक करने में सक्षम नहीं हूं, क्योंकि यह एक क्लाइंट साइट प्रगति पर है, लेकिन अगर किसी के पास कोई विचार है तो मैं यहां स्ट्रॉ पर पकड़ रहा हूं।

Answer 1

बाहर निकलता है, समस्या यह थी कि HTML5 तत्व प्रिंट पर सही ढंग से प्रतिपादन नहीं कर रहे थे, और HTML5 शिव डिफ़ॉल्ट रूप से प्रिंटिंग का समर्थन नहीं करता है।

सौभाग्य से मुझे (और आप) के लिए

, वहाँ एक IE प्रिंट संरक्षण प्लगइन यहाँ पर सिकंदर फ़र्कास द्वारा बनाई गई है: https://github.com/aFarkas/html5shiv

संपादित करें:

लग रहा है Modernizr अब एक प्रिंट शिव का विकल्प है, जैसा कि आप प्रयोग कर रहे हैं Modernizr सभी के लिए अपने शिव-इंग (पूरी तरह से एक शब्द) की जरूरत है: http://modernizr.com/download/

Answer 2

मुझे लगता है कि आप वैकल्पिक रूप प्रिंट शैलियों को निरूपित करने की जरूरत है ...

<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" /> 
<link rel="alternate stylesheet" href="/assets/css/print.css" type="text/css" media="print" /> 

वास्तव में, मुझे लगता है कि गलत है, लेकिन मैं इसे छोड़ रहा हूं।

आप सभी के लिए प्रिंट शैली के लिए मीडिया में attr बदल रहा है और उसके बाद प्रिंट मीडिया क्वेरी में स्टाइलशीट अंदर सब कुछ लपेटकर कोशिश कर सकते हैं: अपने सीएसएस और मार्कअप देखे बिना

@media print { … } 

Answer 3

यह वास्तव में अंधेरे में एक शॉट है , या कम से कम एक सभ्य हिस्सा!

position:absolute या fixed के साथ प्रिंटिंग तत्वों के साथ समस्याएं हैं जैसा कि this msdn article पर टिप्पणियों में उल्लेख किया गया है; इसका अर्थ यह है कि आपको उन्हें मैन्युअल रूप से रीफ्लो करना चाहिए (position:static सेट करें या संभावित रूप से तत्वों को पूरी तरह छुपाएं)। इससे निपटने के लिए एक कट्टर तरीका है अपने print.css को

* {position:static !important;} 

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

आप अभी तक प्रिंट अनुभव आप का उत्पादन करना चाहते हैं पर फैसला नहीं कर रहे हैं, एक और great article on alistapart पढ़ने सिर्फ इतना है कि पर ध्यान केंद्रित करने पर विचार!

Answer 4

FYI करें मैं IE9 and'alternate में इस मुद्दे था ', यानी

<link rel="alternate stylesheet" href="......." type="text/css" media="print" /> 

आईई 9 में मेरे लिए काम किया!