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ến nhấ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ất cả 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à 7 thủ thuật CSS thường dùng đối với các lỗi độc quyền của...
Nội dung trích xuất từ tài liệu:
7 thủ thuật CSS thường dùng đối với các lỗi "cố ý" của IE 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IEInternet Explorer là trình duyệt web phổ biến nhất do nó đ ược tích hợp chặtchẽ với Windows, lợi thế đó cho thấy sự ích kỉ và sinh ra sự áp đặt đối vớingười dùng, đặc biệt là các nhà phát triển. Có những đoạn mã đúng chuẩnXHTML có thể chạy tốt trên tất cả các trình duyệt đạt chuẩn hiển thị XHTMLnhư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ếtquả. Dưới đây là 7 thủ thuật CSS thường dùng đối với các lỗi độc quyền củangài IE trong quá trình thiết kế một trang Web.1. Lỗi hiển thị khốiSử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ộidung 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ệnNhững ghi chú này đơn giản là những ghi chú chỉ hiển thị đối với những phiên bảntrình duyệt nhất định do từng phiên bản có những lỗi khác nhau.Đoạn mã trên sẽ hiển thị mã CSS tương ứng trên tất cả các phiên bản trình duyệtIE, 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ẹ fileCSS cũng như giảm tải cho các trình duyệt khác, để áp dụng các mã CSS đặc biệttrên cho IE thì chỉ cần thêm đoạn mã sau vào phần header là đạt yêu cầu được nạptrong 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 đốitượngTấ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 đang muố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ất chăng ?4. Chọn đối tượngTù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ữngcá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áchtml>body {}- Các trình duyệt mới khác trừ IE 7html>/**/body {}- Các phiên bản Opera v9 trở về trướchtml: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 đối tượng đượcliệ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ìnhduyệt hiểu và hiển thị tốt hiệu ứng này ngoại trừ IE :-L. Đây là một vấn đề phứctạp, bạn có thể xem bài viết này để biết cách xử lý vấn đề của IE6. Hiệu ứng trong suốt của định dạng ảnh PNGIE không hỗ trợ hiệu ứng trong suốt của định dạng ảnh PNG đơn giản bời vì địnhdạng PNG không phải do Microsoft hỗ trợ hay do họ tạo ra ;)) Điều đó không cónghĩa là chúng ta phải chấp nhận và chuyển qua dùng định dạng GIF có độ phângiải thấp hơn nhiềuSử 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); }Komodomedia 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 ứngBằng cách sử dụng PHP để phát hiện trình duyệt dựa trên dịnh danh browser agentchúng ta có thể biết được trình duyệt nào đang tải website và đưa ra mã CSS tươngứng. Stylegala có đưa ra một phương án cho cách làm này.Bài viết dựa trên bài Top 7 CSS hacks that we often use to solve common IEProblems. Bạn có thể xem bài viêt gốc để biết thêm.Đình QuânTheo thongtincongnghe.com ...