2011-09-21 6 views
12

मैं किसी साइट के सीएसएस प्रोग्रामिंग कर रहा हूं, और महसूस किया कि इंटरनेट एक्सप्लोरर 9 अन्य ब्राउज़रों (फ़ायरफ़ॉक्स, क्रोम, सफारी, आई 7 और आईई 8) के संबंध में अलग-अलग फ़ॉन्ट आकार दिखा रहा है।IE9/फ़ायरफ़ॉक्स अन्य ब्राउज़रों के संबंध में एक अलग फ़ॉन्ट आकार क्यों दिखा रहा है?

मैंने कुछ RESETS का उपयोग करने का प्रयास किया है, और मैं फ़ॉन्ट को px में निर्दिष्ट कर रहा हूं, लेकिन IE9 अभी भी फ़ॉन्ट आकार में अंतर दिखाता है।

मैंने font-sizept, in, प्रतिशत में उपयोग करने का प्रयास किया है, लेकिन कोई सफलता नहीं मिली है।

मैंने पहले फ़ॉन्ट बदल दिया (जॉर्जिया, टाइम्स न्यू रोमन, वर्दाना)। उनमें से कुछ बड़े दिखाए जाते हैं, अन्य IE9 में छोटे होते हैं।

मैंने आईई में ज़ूम सेटिंग्स और टेक्स्ट आकार की जांच की। वे क्रमशः 100% और मध्यम हैं।

उदाहरण के लिए, मैंने एक सरल HTML और CSS बनाया है क्योंकि आप नीचे दिए गए कोड को देख सकते हैं। इस समस्या को हल कैसे करें? धन्यवाद!

समस्या:

कोड:

एचटीएमएल

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <p> 
    AAAAA BBBBB CCCCC DDDDD EEEEE FFFFF GGGGG HHHHH IIIII JJJJJ KKKKK LLLLL MMMMM NNNNNN OOOOO PPPPP QQQQQ 
    </p> 
</body> 
</html> 

सीएसएस

/* RESET */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* END OF RESET */ 

body { 
    background-image:url(GreenLine.png); 
    background-repeat:no-repeat; 
    font-family:"Courier New", Courier, monospace; 
    font-size:12px; 
} 
+0

सूचना लाल धारियों - http://ie.microsoft.com/testdrive/ - उन फ़ॉन्ट रेंडरिंग में मतभेद के कारण होता है (और लाल रंग की पृष्ठभूमि, बनाता है जो द्वारा aggravated उन ब्राउज़रों गाड़ी देखो) – c69

+0

आप इस सवाल के साथ doctype.com जैसी अधिक डिज़ाइन उन्मुख साइट पर बेहतर प्रदर्शन कर सकते हैं, क्योंकि ऐसा लगता है कि यह सीएसएस की तुलना में फ़ॉन्ट प्रतिपादन से संबंधित है। – Ishmael

+0

फ़ायरफ़ॉक्स का कौन सा संस्करण आप इसे जांच रहे हैं? जवाब "महत्वपूर्ण" है। मैं उम्मीद करता हूं कि फ़ायरफ़ॉक्स आईई 9 से मेल खाता है। – thirtydot

उत्तर

-2

दो संभव बातें, दोनों अपरीक्षित:

  1. एक्सएचटीएमएल संक्रमणकालीन के अलावा कुछ करने के लिए डॉक प्रकार बदलने का प्रयास करें। देखें कि एचटीएमएल 5 डॉक्ट टाइप इसे बेहतर प्रदान करता है या नहीं। <!DOCTYPE html>

  2. यह देखने के लिए कि यह एक फ़ॉन्ट समस्या है या नहीं, केवल font-family: monospace; का उपयोग करने का प्रयास करें।

संपादित

तो उन काम नहीं करते और आप एक समाधान नहीं मिल रहा है, तो आप सशर्त टिप्पणियों का उपयोग कर IE9 एक अलग font-size सेवा करने के लिए चाहते हो सकता है।

+0

मैंने डोक्टवाईपी और फ़ॉन्ट परिवार को मोनोस्पेस में बदल दिया, और समस्या जारी है। मैंने पहले फ़ॉन्ट बदल दिया (जॉर्जिया, टाइम्स न्यू रोमम, वर्दान)। उनमें से कुछ बड़े दिखाए जाते हैं, अन्य IE9 में छोटे होते हैं। पीएस: मैंने आईई में ज़ूम सेटिंग्स और टेक्स्ट आकार की जांच की। वे क्रमशः 100% और मध्यम हैं। धन्यवाद। – bbastos

+0

हम्म @ ब्रुनोबास्टोस ... सुनिश्चित नहीं है। ऊपर मेरा संपादन देखें। –

7

IE9 टेक्स्ट प्रस्तुत करने के लिए DirectWrite का उपयोग करता है, और अन्य ब्राउज़र नहीं (फ़ायरफ़ॉक्स 4+ को छोड़कर) नहीं करते हैं।

यही कारण है कि दोनों ब्राउज़रों के बीच पाठ के थोड़ा अलग आकार का कारण है।

टेक्स्ट को एक ही आकार बनाने का कोई तरीका नहीं है।

इस पढ़ें: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

और यह, विशेष रूप से "इशारा और रिक्ति मतभेद" अनुभाग: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

-1

कोशिश body{font-size:medium; line-height:1em;} जहां font-size 16px का अब हो जाएगा और उपयोग निर्धारित करने के लिए font-size को बढ़ाने या घटाने के लिए p पर प्रतिशत। p टैग की चौड़ाई सीमित करने के लिए सुनिश्चित करें। गैर यानी ब्राउज़रों में

P{max-width:40%; font-size:86%; line-height:1.2em;} 
+0

ध्यान रखें, मैंने आपके कोड की एक पंक्ति में दो टाइपो संपादित किए हैं। एक स्टैक ओवरफ्लो उत्तर में वर्किंग कोड शामिल होना चाहिए, न कि जो दूसरों को नई परेशानी में डाल रहा है। –

संबंधित मुद्दे