Css font-size dạng % trong element (before, after) bị lỗi trên IE

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

1

<h1>Money</h1>

– Css

1
2
3
4
5
6
7
8
9
10

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,….