Tôi đang lập trình CSS của một trang web và nhận ra rằng Internet Explorer 9 đang hiển thị kích thước phông chữ khác nhau liên quan đến các trình duyệt khác (Firefox, Chrome, Safari, IE7 và IE8).Tại sao IE9/Firefox lại hiển thị kích thước phông chữ khác nhau liên quan đến các trình duyệt khác?
Tôi đã thử sử dụng một số RESETS và tôi chỉ định phông chữ trong px, nhưng IE9 vẫn hiển thị sự khác biệt về kích thước phông chữ.
Tôi đã thử sử dụng font-size trong pt, in, tỷ lệ phần trăm, nhưng không thành công.
Tôi đã thay đổi phông chữ trước đó (Georgia, Times New Roman, Verdana). Một số trong số chúng được hiển thị lớn hơn, số khác lại nhỏ hơn trong IE9.
Tôi đã kiểm tra cài đặt thu phóng và kích thước văn bản trong IE. Họ là 100% và trung bình tương ứng.
Để minh họa, tôi đã tạo HTML và CSS đơn giản vì bạn có thể xem mã bên dưới. Làm thế nào để giải quyết vấn đề này? Cảm ơn!
Vấn đề:
Code:
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;
}
Chú ý các sọc màu đỏ trong các trình duyệt không có nghĩa là - http://ie.microsoft.com/testdrive/ - các lỗi này do sự khác biệt về hiển thị phông chữ (và làm trầm trọng thêm bởi nền đỏ, khiến các trình duyệt đó trông lỗi) – c69
Bạn có thể làm tốt hơn với câu hỏi này trên một trang web có định hướng thiết kế hơn như doctype.com, vì có vẻ như nó liên quan nhiều hơn đến hiển thị phông chữ hơn CSS. – Ishmael
Bạn đang kiểm tra phiên bản Firefox nào? Câu trả lời là "quan trọng". Tôi hy vọng kết xuất Firefox sẽ khớp với IE9. – thirtydot