Khi CSS cho các trình duyệt IE cần lưu ý các vấn đề sau:
1. padding, margin, width, height, float …
- Nếu đã set width thì không sử dụng padding 2 chiều left, right
- Nếu đã set height thì không sử dụng padding 2 chiều top, bottom
- Nếu đã float: left –> ko dùng margin-left
- Nếu đã float: right –> không dùng margin-right
(Ngược lại)
2. Bo góc bằng ảnh (img)
Ví dụ: bạn có 1 thẻ A, bao 2 thẻ IMG để bo góc thành 1 button
<a onclick=”networkManager.notifyUserFriend(’18′, ‘notifyremoveUser-18′);” href=”javascript:void(0);” class=”link-button2″> <img src=”/theme/images/pixshare_transparent.png” class=”corner-l”>
BUTTON NAME
<img src=”/theme/images/pixshare_transparent.png” class=”corner-r”>
</a>
Nếu có khoảng trắng giữa thẻ A và thẻ IMG thì sẽ bị lỗi giao diện trên IE
3. Z-index
z-index của 1 element con sẽ phụ thuộc vào z-index của element cha.
Tham khảo: http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
4. Lỗi khi sử dụng onchange với thẻ SELECT Không dùng <select onchange=”function..”>, tren IE sẽ bị gọi 2 lan hàm onchange.
Khắc phục: Sử dụng jquery: $(‘select’).change(function() { .. } );
5. Event handlers trên thẻ OPTION
- Tất cả các version (6,7,8) của IE đều không hỗ trợ bất kỳ event handlers nào trên thẻ OPTION
–> Tốt nhất là ko nên bắt sự kiện trên thẻ option trên bất kỳ trình duyệt nào.
(Còn bổ sung …)
