Điều này khiến tôi phát điên. Văn bản Firefox thấp hơn 1px so với chrome và ie. Nó không phải là một vấn đề lề hoặc padding trên html hoặc cơ thể, đã thử điều đó. Dường như không phải là một vấn đề làm tròn. Dưới đây là một hình ảnh:Firefox văn bản 1px thấp hơn chrome và tức là
đầu tiên "Hello" là Firefox 13, lần thứ hai "Hello" là IE9 và "Hello World" là Chrome.
Đây là mã (khá đơn giản):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine and chrome frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixel Bug?</title>
<style type="text/css">
html{
font-size: 100%;
}
body{
font-size: 1em;
line-height: 1.5;
background: white url('images/grid16.png') -4px -6px;
}
p{
margin: 1.5em 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World 2!</p>
</body>
</html>
Là nó chỉ là lỗi? Chuyện gì đang xảy ra ở đây? Tôi không muốn một FireFox chỉ làm việc xung quanh, tôi chỉ muốn hiểu tại sao điều này xảy ra.
EDIT:
Sau khi nghiên cứu sâu hơn nó có vẻ là một lỗi render, nhưng nó vẫn bối rối cho tôi. Ví dụ: chiều cao của văn bản phải là 24px. Mà không thực sự gây ra làm tròn lỗi mà có thể gây ra điều này. Tuy nhiên, nếu tôi thay đổi chiều cao dòng thành 23px một cách rõ ràng, nó xếp hàng. Tôi không biết tại sao.
EDIT2: Lý do có thể xảy ra? https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3: Dòng lên bằng cách sử dụng phông chữ 20px và chiều cao dòng 40px. Làm cho tôi nghĩ đây chỉ là lỗi hiển thị. Nó hút nguyên nhân 16/24 là khá chuẩn:/
bạn có thể tạo một jsfiddle ?? –
Tôi gặp vấn đề này với phông chữ phông chữ và chỉ có thể làm việc xung quanh điều này bằng cách thiết lập đơn giản kích thước phông chữ nhỏ hơn trong safari (là một lỗi chỉ safari).cách giải quyết dơ bẩn, nhưng nó làm cho khách hàng hạnh phúc – Sliq
Đó có thể là các kỹ thuật làm mịn phông chữ khác nhau được sử dụng bởi các trình duyệt/hệ điều hành khác nhau. Cố gắng để phù hợp trên một cấp độ pixel là errand của một kẻ ngốc. – steveax