Hành vi chiều rộng đường viền lạ trong Chrome - Độ rộng đường viền của dấu chấm động?

Question

Một số mẫu thiết kế chất lỏng nhất định, đặc biệt là thiết kế liên quan đến iFrames% -width, dường như gây ra một số lỗi kiểu làm tròn lạ trong Chrome (tôi đã có phiên bản 21).

This Fiddle minh họa sự cố. Đặt đường viền thành giá trị pixel nguyên và các giá trị bạn nhận được khi bạn yêu cầu chúng là các số dấu phẩy động hơi nhỏ hơn giá trị mong đợi.

Cố gắng exact same code in CodePen không mang lại kết quả tương tự, có lẽ do iFrame và các kiểu khác xung quanh nó không được thiết lập theo cùng một cách.

(Tôi cũng đã nhìn thấy hành vi này cho chiều rộng và chiều cao cơ bản thuộc tính, mặc dù tôi đã không thể tái tạo một phần của vấn đề trong jsFiddle.)

này dường như không phải là một vấn đề trong Firefox hoặc trong IE8.

Bất kỳ ý tưởng nào về cái gì, cụ thể, đang gây ra hành vi kỳ lạ này, và làm cách nào tôi có thể làm việc xung quanh nó để đạt được giá trị thực?

---

Cốt truyện dày hơn. Trong một nỗ lực để shim xung quanh vấn đề, tôi thấy rằng các giá trị trên 10px dường như không phải chịu vấn đề.

Ngoài ra, dựa trên @ bình luận GionaF, nó dường như hoạt động đúng trong Chrome 22.

Answer 1

Để tái tạo sự cố của bạn, tôi phải thay đổi mức thu phóng của Chrome. Thay đổi mức thu phóng trở về 100% để sửa nó. Nó dường như là một lỗi, chiều rộng biên giới được tính toán luôn nhỏ hơn chiều rộng đường viền được xác định, phóng to hoặc thu nhỏ!

Đường viền 10px của bạn cung cấp giá trị là 10 khi mức thu phóng là 110%, nhưng trên 125% nó có cùng vấn đề với đường viền 3px của bạn.

chỉnh sửa: firefox có cùng hành vi!

Answer 2

tôi không thể tái tạo hành vi này trong Chrome hiện nay, nhưng hành vi này rất có thể đã làm với Subpixel Rendering. Về cơ bản, Webkit sẽ thực hiện các phép tính bằng cách sử dụng toán số nguyên để tránh sự không chính xác của dấu phẩy động.

Có vẻ như hiện tại, border không sử dụng hiển thị phụ pixel có thể giải thích lý do sự cố không hiển thị trong các phiên bản Chrome mới.

Answer 3

Có thiết lập kích thước hộp thành hộp biên giới cho tất cả các thành phần trợ giúp không? Điều này sẽ thay đổi cách mô hình hộp được tính toán nơi đường viền và phần đệm sẽ không ảnh hưởng đến chiều rộng.

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; } 

Answer 4

Tôi cũng gặp vấn đề với đường viền ở các số input và các yếu tố khác. Sau một giờ dành thời gian, tôi đã tìm thấy lý do bất ngờ gây ra vấn đề này. Bootstrap css sử dụng normalize css và đoạn mã sau đã gây ra vấn đề như vậy:

hr { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
} 

Để giải quyết vấn đề này, tôi ghi đè lên các css trong style.css của tôi:

hr { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Nguyên tắc hr thực sự không liên quan với input s nhưng nó hoạt động. Đây là hành vi thực sự bất ngờ, hãy thử nó và sẽ hoạt động.