Tại sao các phương thức position() và offset() của jQuery trả về số phân số trong Chrome?

Question

Tôi có thẻ div đơn giản, được định vị hoàn toàn trong tài liệu HTML. Khi ở trong Chrome, tôi đặt quy tắc CSS "đúng" thành giá trị cố định bằng pixel và quy tắc "trái" thành "tự động" rồi sau đó xác định vị trí bên trái của nó bằng phương thức vị trí() của jquery. là loại này: 122.6363525390625. Tương tự với phương thức offset().

Firefox mặt khác, không có vấn đề này.

Bạn có thể cho tôi biết tại sao điều này xảy ra và nếu có cách nào để ngăn chặn điều đó? Cảm ơn bạn trước!

Answer 1

Bởi vì khi bạn sử dụng độ rộng phần trăm, đó là những gì toán học hoạt động. Hãy tưởng tượng rằng bạn có bố cục này:

<div style="width: 111px"> 
    <div style="width: 50%"></div> 
</div> 

Chiều rộng của phần tử bên trong tính bằng 55,5 pixel, không phải là số tự nhiên. Tùy thuộc vào các thuộc tính CSS chính xác, điều này có thể dễ dàng làm việc với một vài vị trí thập phân hơn.

Chrome uses subpixel rendering, vì vậy đó là lý do bạn thấy hành vi này.

Cuối cùng: Tôi không chắc tại sao điều này lại gây ra vấn đề cho bạn, nhưng tất nhiên nếu bạn muốn làm tròn số tự nhiên, bạn có thể sử dụng Math.round(x).

Answer 2

Trong Chrome, các giá trị bị cắt bớt, vì vậy, 120, 120,5 và 120,6 tất cả đều hiển thị cùng chiều rộng, vì vậy bạn không cần phải lo lắng về nó bằng cách sử dụng giá trị thập phân. Không có gì giống như 0,5 pixel. Pixel là toàn bộ đơn vị. Nếu bạn có vấn đề về chức năng trả về giá trị thập phân thì tại sao không sử dụng parseInt? Bạn không nên để điều này cho trình duyệt xử lý hoặc nếu không trang của bạn có thể bị hỏng.