7 thủ thuật CSS thường dùng đối với các lỗi "cố ý" của IE

Internet Explorer là trình duyệt web phổ biếnnhất do nó được tích hợp chặt chẽ với Windows, lợi thế đó cho thấy sựích kỉ và sinh ra sự áp đặt đối với người dùng, đặc biệt là các nhàphát triển. Có những đoạn mã đúng chuẩn XHTML có thể chạy tốt trên tấtcả các trình duyệt đạt chuẩn hiển thị XHTML nhưng chưa hẳn nó sẽ hiểnđúng trên IE thậm chí IE còn không thèm trả lại kết quả. Dưới đây là 7thủ thuật CSS thường dùng đối với các lỗi độc quyền của ngài IE trongquá trình thiết kế một trang Web.
1. Lỗi hiển thị khối

Sửa lỗi hiển thị cho các phiên bản IE6 về trước khi viền và khoảng cách với nội dung bao gồm cả chiều rộng của đối tượng. padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em;2. Ghi chú điều kiện

Nhữngghi chú này đơn giản là những ghi chú chỉ hiển thị đối với những phiênbản trình duyệt nhất định do từng phiên bản có những lỗi khác nhau. Đoạnmã trên sẽ hiển thị mã CSS tương ứng trên tất cả các phiên bản trìnhduyệt IE, nếu bạn chỉ muốn nó được trình duyệt IE v5.01, v5.5 và v6 đọcđược thì có thể dùng đoạn mã sau: Sau khi thử nghiệm chúng ta nên loai bỏ các đoạn mã đặc biệt trên đểgiảm nhẹ file CSS cũng như giảm tải cho các trình duyệt khác, để ápdụng các mã CSS đặc biệt trên cho IE thì chỉ cần thêm đoạn mã sau vàophần header là đạt yêu cầu được nạp trong IE: Một vài kiểu mã điều kiện:

IE - Bất kỳ phiên bản nào
lt IE version - Phiên bản trước version
lte IE version - Phiên bản trước hoặc bằng với version
IE version - Chỉ với phiên bản version
gte IE version - Phiên bản từ version
gt IE version - Phiên bản mới hơn version.

3. Min-width và Max-width - Độ rộng lớn tối đa và tối thiểu của một đối tượng

Tất cả các phiên bản của IE đều không hiểu đoạn mã này có ý nghĩa gì,chính vì vậy chúng ta phải tạo một cách khác để nó có thể biết ta đangmuốn gì dựa trên ví dụ về việc tạo một lớp có id="wrapper": Kế tiếp vớiđoạn mã tạo một lớp có độ rộng tối thiểu 750px: #wrapper{
min-width: 750px;
width:expression(document.body.clientWidth < 750? "750px": "auto" );
} Đoạn mã sau có độ rộng tối thiểu 750px và tối đa 1220px: #wrapper{
min-width: 750px;
max-width: 1220px;
width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");
} Một cách khác không dùng đến JS trong CSS: selector {
min-height:500px;
height:auto !important;
height:500px;
} Đoạn mã này cho kết quả như nhau trên các trình duyệt IE6,Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2; có lẽ là tối ưu nhấtchăng ?4. Chọn đối tượng

Tùy từng phiên bản khác nhau của IE mà lỗi chọn đối tượng được sửa theo những cách khác nhau như sau: - IE 6 trở về trước *html {}- IE 7 trở về trước *:first-child+html {}
* html {}- IE 7 *:first-child+html {}- IE 7 và các trình duyệt mới khác html>body {}- Các trình duyệt mới khác trừ IE 7 html>/**/body {} - Các phiên bản Opera v9 trở về trước html:first-child {} 5. Hiệu ứng hover:

Mã:hover cho phép bạn tạo ra những hiệu ứng đặc biệt đối với các đốitượng được liệt kê dưới dạng bảng như danh sách bài viết trên diễnđàn... Phần lớn các trình duyệt hiểu và hiển thị tốt hiệu ứng này ngoạitrừ IE :-L. Đây là một vấn đề phức tạp, bạn có thể xem [You must be registered and logged in to see this link.] để biết cách xử lý vấn đề của IE 6. Hiệu ứng trong suốt của định dạng ảnh PNG

IEkhông hỗ trợ hiệu ứng trong suốt của định dạng ảnh PNG đơn giản bời vìđịnh dạng PNG không phải do Microsoft hỗ trợ hay do họ tạo ra Wink

) Điềuđó không có nghĩa là chúng ta phải chấp nhận và chuyển qua dùng địnhdạng GIF có độ phân giải thấp hơn nhiều Sử dụng một đoạn mã HTC và một file .gif trong suốt để xử lý lỗi này, có thể tải ở đây.Thêm đoạn mã sau vào file ie.css: img.pngfix { behavior: url(pngHack.htc); } [You must be registered and logged in to see this link.] có một giải pháp khác cũng cho kết quả tương tự. 7. Phát hiện trình duyệt để sử dụng CSS tương ứng

Bằngcách sử dụng PHP để phát hiện trình duyệt dựa trên dịnh danh browseragent chúng ta có thể biết được trình duyệt nào đang tải website và đưara mã CSS tương ứng. Stylegala có đưa ra [You must be registered and logged in to see this link.] cho cách làm này. Bài viết dựa trên bài [You must be registered and logged in to see this link.] Bạn có thể xem bài viêt gốc để biết thêm.
[You must be registered and logged in to see this link.]

» Khắc phục một số lỗi thường gặp khi sử dụng USB
» 8 thủ thuật hữu dụng cho Windows 7
» 5 thủ thuật hữu ích khi sử dụng Gmail
» 5 thủ thuật hữu ích khi sử dụng Gmail
» Các thuật toán sắp xếp mảng thông dụng