Các lỗi hiển thị khác nhau giữa Chrome và Firefox

Question

Tôi đã nhận thấy một vấn đề nhỏ khi sử dụng các lần chuyển đổi khi so sánh cách chúng hiển thị trong Chrome và Firefox.

Sử dụng CSS sau đây:

html { 
    font-size: 62.5%; 
} 

.rem-test { 
    width: 50%; 
    height: 20rem; 
    background: red; 
} 

Kết quả là hơi khác nhau khi render, Firefox cho thấy hộp ngắn hơn có vẻ trong Chrome:

Có điều gì tôi có thể làm để ngăn chặn điều này xảy ra?

Dưới đây là một cây bút: http://codepen.io/abbasinho/pen/WbJWNq

Answer 1

Kể từ rem được tính bằng cách sử dụng cỡ chữ html của bạn (có nghĩa là kích thước phông chữ của cơ thể là 5px sau đó 20rem sẽ 100px), bạn cần phải có kích thước font chữ thống nhất trên các trình duyệt.

Thử thêm sửa đổi kích thước phông chữ trong bút mã.

Add-

body, html { 
    font-size:15px; 
} 

Tất cả những gì nên làm việc tương tự như bây giờ.

Answer 2

Điều đó xảy ra chắc chắn nhất vì trình duyệt của bạn có cài đặt kích thước phông chữ khác nhau, bạn có thể dễ dàng kiểm tra nó bằng this fork của bảng mã.

alert(document.querySelectorAll('.rem-test').item(0).scrollHeight); 

Nếu giá trị được cảnh báo khác với chrome và firefox, bạn chắc chắn nên kiểm tra cài đặt kích thước phông chữ của mình.

Answer 3

Có cùng "vấn đề" chính xác. Trong trường hợp của tôi nó đã làm với phông chữ mở rộng Windows 10 và kích thước mục.

Firefox tính đến điều này vi hiển thị mọi thứ 1.25 lần mở rộng khi được đặt thành 125%. Trong khi chrome thì không.

Vì vậy, 14px trong Firefox sẽ trở thành: 17,5px trên màn hình và trong chrome, nó ở 14px.