Sử dụng: sau phần tử giả sau phần tử neo - khác biệt trình duyệt

Question

Tôi có thành phần <a>, sau đó tôi muốn hiển thị một dấu hiệu >, sử dụng phần tử giả :after.

Nội dung của phần tử <a> là động, do đó, chiều rộng thay đổi và đôi khi sự kiện nội dung kéo dài một vài hàng (vì phần tử <a> này nằm bên trong một chiều rộng là cố định).

Tôi muốn vị trí ngang của > bắt đầu ở cuối hàng dài nhất. Đó là, khi tôi cho nó rằng right:0; quy tắc, nó phải là ở bên phải nhất cạnh của nguyên tố (vị trí dọc không quan trọng ngay bây giờ):

Đó là cách ứng xử trong FF , nhưng trong Chrome và IE, các > xuất hiện ở cuối của dòng ngắn nhất:

tôi muốn hiểu những gì gây ra sự khác biệt giữa các trình duyệt, nhưng quan trọng hơn, tôi muốn tất cả trình duyệt hoạt động như FF - đặt :after ở cuối hàng dài nhất. Điều đó có thể không?

tôi đặt the above code trên dabblet

Answer 1

Đó là bởi vì yếu tố a của bạn được thiết lập để hiển thị inline theo mặc định, và Firefox xử lý các vị trí trong vòng inline yếu tố hơi khác nhau để Chrome và IE.

Để sửa lỗi này trong cả Chrome và IE (trong khi giữ lại giao diện trong Firefox), bạn chỉ cần cung cấp cho yếu tố a bạn một màn inline-block:

a { 
    position:relative; 
    display:inline-block; 
} 

Modified Dabblet demo.