Vấn đề: Mình từng fix 1 lỗi khá khó chịu cho khách hàng trên IE đó là khi viết element:before hoặc element:after chứa font-size là % nhưng trên css có nhiều chỗ font-size % cho cùng 1 element thì trên IE nó tính font-size cho element đó bằng cách nhân lên từng đó số lần %
Xem ví dụ dưới dễ hiểu hơn:
- Html
<h1>Money</h1>
- Css
h1 {
font-size: 100px;
}
h1:after {
content: '($)';
font-size: 60%;
}
h1:after {
font-size: 60%;
}
- Kết quả hiển thị html trên là: Money($)
Vậy câu hỏi đặt ra là: dấu ($) lúc này có giá trị font-size là bao nhiêu?
- Trình duyệt chrome, firefox có font-size: 100px * 60% = 60px
- Trình duyệt IE có font-size: 100px * 60% * 60% = 36px
Có thể thấy cách tính khác biệt của thằng IE rồi đấy nó ko ghi đè lên mà nó nhân lên số lần viết css là % như vậy
Giải pháp: viết css font-size cho element:before hoặc element:after nên viết ở dạng cố định px, em,….