Internet Explorer 11 không hỗ trợ gốc phần tử HTML5 <main>. Do đó, CSS như main { background-color: ... } không có tác dụng.
Giải pháp 2 bước
1. Tạo phần tử main bằng JavaScript (shim)
document.createElement('main');
Đoạn code này báo cho IE biết rằng main là một phần tử hợp lệ, cho phép áp dụng CSS. Nên đặt trong <head> hoặc dùng thư viện Modernizr để tự động xử lý.
2. Đặt display: block trong CSS
main {
display: block;
}
Các trình duyệt cũ coi các phần tử HTML5 không nhận diện là inline mặc định. Ép buộc display: block giúp layout hiển thị đúng.
Sau khi áp dụng cả hai, bạn có thể dùng background-color, padding, margin... cho <main> bình thường trên IE11.