Tại sao Firefox làm cho các đường viền bị gạch ngang lệch hướng với nhau?

Question

http://betawww.helpcurenow.org/about/financial-accountability/

http://blog.helpcurenow.org/

Tôi đang sử dụng một thiết kế kết hợp nhiều 1px biên giới tiêu tan. Tôi nhận thấy điều gì đó kỳ quặc trong Firefox. Thông thường Firefox sẽ hiển thị mọi thứ (* gần như) như tôi mong đợi và muốn xem nó. Tuy nhiên với đường viền đứt nét, nó xuất hiện khi bạn sử dụng hai đường viền đứt nét gần nhau, chúng bị lệch hướng. Ý tôi là, tôi có một số đối tượng có đường biên dưới 1px, lề dưới 2px, và đối tượng tiếp theo có đường viền trên 1px - về cơ bản tạo hiệu ứng của đường viền kép.

Khi xem các hiệu ứng đã biết trong Safari, Chrome và IE, hiệu ứng "đường viền kép" trông rất tuyệt. Tuy nhiên trong Firefox, họ vạch ra các đường không xếp hàng (không có ý định chơi chữ).

Tôi chắc chắn nó chỉ là một trục trặc về cách Firefox làm biên giới bị đứt quãng, nhưng tôi muốn hiểu rõ hơn tại sao, nếu có ai biết.

Bạn sẽ thấy hiệu ứng trong hai URI của tôi ở trên. Đầu tiên có một hộp bên, trong đó tiêu đề sử dụng hiệu ứng này. Thứ hai (blog của chúng tôi) sử dụng hiệu ứng này trên tất cả, nhưng nổi bật nhất bạn sẽ thấy với mỗi tiêu đề bài viết, dòng dưới đây cũng sử dụng hiệu ứng này.

Answer 1

Đối với "tại sao?" Một phần của câu hỏi, có một lời giải thích khá đơn giản: các w3c không define làm thế nào để vẽ biên giới, vì vậy mỗi trình duyệt viết thực hiện độc lập của riêng mình. Thuật toán của Firefox dường như làm cho biên giới trong một mô hình tròn, như trái ngược với mô hình đối xứng WebKit:

┌─ ─ ─ ─ ─ ─ ─ ─ ┐ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐ 
|    ↓ ↓     ↓ 
|    | |     | 
|    | |     | 
↑    | |     | 
└ ─ ─ ─ ─ ─ ─ ─ ─┘ └ ─ ─ ─ ─ ─ ─ ─ ─ ┘ 
    Firefox    WebKit 

Bạn sẽ nhận thấy rằng trình duyệt Internet Explorer không vẽ hộp giống như Opera/Chrome/Safari, một trong hai. Có một khoảng trống nhỏ ở bên trái của đường viền ở cả phía trên và phía dưới (mặc dù điều này có thể khắc phục được với border-collapse).