Có vẻ như chrome làm tròn giá trị của số line-height được tính toán.Làm tròn chiều cao dòng
Ví dụ:
line-height:1.33 với font-size:11px sẽ tính line-height:14px.
Trong khi giá trị chính xác là 14.66 vì vậy tôi mong chờ các line-height để bằng 15px
Bạn có biết nếu có bất kỳ cách nào để buộc các trình duyệt để làm tròn lên giá trị tính toán thay vì làm tròn xuống?
Chrome cắt bớt số thập phân thành giá trị pixel nguyên. Các trình duyệt khác (FF) sẽ tròn thành giá trị pixel nguyên gần nhất. Tất cả họ sẽ sử dụng giá trị thập phân để tính giá trị con mặc dù.
Bạn có thể thử sử dụng dịchZ để buộc phần tử có văn bản trong đó được tăng tốc đồ họa, điều này "có thể" cho phép hiển thị pixel phụ cho văn bản. Nếu nó hoạt động, nó sẽ chỉ hoạt động trong Chrome.
#elm {
transform: translateZ(0);
}
Cảm ơn bạn đã chỉ ra những mâu thuẫn trong trình duyệt. Tôi đã thử trên firefox và nó tính như 14.66 vì vậy nó thậm chí không tròn. Tôi tự hỏi cách tốt nhất để có cùng một hiển thị giữa trình duyệt trong khi vẫn giữ tỷ lệ dòng-chiều cao là gì. –
@pgn - tiếc là tất cả chúng đều sử dụng các công cụ hiển thị khác nhau và cách diễn giải các thông số kỹ thuật có liên quan. Nếu thủ thuật dịchZ (0) không hoạt động trên Chrome, thì bạn sẽ chỉ trở nên sâu hơn vào các cuộc tấn công điên rồ. Nếu có một khẩu súng châm ngôn vào đầu tôi, tôi sẽ thử vẽ văn bản bằng SVG hoặc trong CANVAS. –
Bạn có thể chỉ định line-height cụ thể trong bất kỳ đơn vị nào, ví dụ: line-height: 2.2rem; có thể tránh được vấn đề làm tròn nếu bạn tính toán kích thước rem để nó hoạt động với số chẵn trong tất cả các trình duyệt, ví dụ: nếu bạn đặt mặc định:
html {
font-size: 62.5%; /* 10px = 1rem */
}
Sau đó, bất kỳ lúc nào bạn đặt chiều cao của dòng thành giá trị, ví dụ: line-height: 2.2rem; nó sẽ kết thúc chính xác là 22px. Điều này sẽ giống nhau trong tất cả các trình duyệt.
Tôi có thể hỏi làm thế nào bạn cuối cùng đã đi xung quanh điều này? – Birowsky