2011-09-21 12 views
12

Bir sitenin CSS'sini programlıyorum ve Internet Explorer 9'un diğer tarayıcılarla (Firefox, Chrome, Safari, IE7 ve IE8) ilişkili olarak farklı yazı tipi boyutu gösterdiğinin farkına vardım.IE9/Firefox neden diğer tarayıcılara göre farklı bir yazı tipi boyutu gösteriyor?

Bazı RESETS kullanmaya çalıştım ve yazı tipini px olarak belirtiyorum, ancak IE9 hala yazı tipi boyutundaki farkı gösteriyor.

Yüzde pt, in numaralı telefondan font-size kullanmayı denedim, ancak hiç başarı elde edemedim.

Yazı tipini daha önce değiştirdim (Georgia, Times New Roman, Verdana). Bazıları daha büyük, diğerleri ise IE9'da daha küçüktür.

IE'de yakınlaştırma ayarlarını ve metin boyutunu kontrol ettim. Sırasıyla% 100 ve orta boylardır.

Göstermek için aşağıdaki kodu görebildiğiniz gibi basit bir HTML ve CSS oluşturdum. Bu problem nasıl çözülür? Teşekkürler!

sorun:

Kodu:

HTML

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

CSS

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

Bildirim kırmızı çizgili - http://ie.microsoft.com/testdrive/ - bu font oluşturma farklılıklardan kaynaklanan (ve bu tarayıcılar arabası görünmesini sağlar kırmızı arka plan ile ağırlaştırılmış) vardır – c69

+0

Bu soruyla doctype.com gibi daha tasarım odaklı bir sitede daha iyi olabilirsiniz, çünkü CSS'den daha fazla yazı tipi oluşturmayla ilgili olduğu anlaşılıyor. – Ishmael

+0

Hangi Firefox sürümünü karşı denetliyorsunuz? Cevap "önemli" dir. Firefox görüntülemesinin IE9 ile eşleşmesini beklerdim. – thirtydot

cevap

-2

iki olası şeyler, hem denenmemiş:

  1. geçiş xhtml dışında bir Doctype'ı değiştirmeyi deneyin. HTML5 dokümanı daha iyi oluşturup oluşturmadığını görün. <!DOCTYPE html>

  2. Sadece yazı tipi sorunu olup olmadığını görmek için font-family: monospace; kullanmayı deneyin.

DÜZENLEME

olanlar bir çözüm bulamıyorçalışmak ve yoksa, sen koşullu yorum kullanarak IE9 farklı font-size hizmet etmek isteyebilirsiniz.

+0

DOCTYPE ve font ailesini tekdüze olarak değiştirdim ve sorun devam ediyor. Yazı tipini daha önce değiştirdim (Georgia, Times New Romam, Verdana). Bazıları daha büyük, diğerleri ise IE9'da daha küçüktür. PS: Yakınlaştırma ayarlarını ve metin boyutunu IE'de kontrol ettim. Sırasıyla% 100 ve orta boylardır. Teşekkürler. – bbastos

+0

Hmm @BrunoBastos ... emin değilim. Yukarıdaki düzenlemeye bakın. –

7

IE9, metin oluşturmak için DirectWrite kullanır ve diğer tarayıcılar (Firefox 4+ hariç) kullanmaz.

İki tarayıcı arasındaki metnin biraz farklı boyutunun nedeni budur.

Metni aynı boyutta yapmanın bir yolu yoktur.

bunu okuyun: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

Ve bu, özellikle "Dayatma ve boşluk farklılıkları" bölümü: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/

-1

deneyin font-size şimdi 16px olacaktır body{font-size:medium; line-height:1em;} ve kullanımını ayarlamak için font-size değerini artırmak veya azaltmak için p etiketindeki yüzde. p etiketinin genişliğini sınırladığınızdan emin olmak için. olmayan yani tarayıcılarda

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

Kendinize iyi bakın, kodunuzun bir satırında iki yazım hatası düzenledim. Bir StackOverflow cevabı, çalışma kodunu içermeli, başkalarını yeni belaya sokmak için değil. –

İlgili konular