« Nhạc trong tháng: 03 Album
Tình yêu và Hôn nhân »

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

IE 7 BugsIE - Internet Explorer là trình duyệt Internet phổ biến nhất do nó được tích hợp chặt chẽ với hệ điều hành 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ả x(
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 ngài IE trong quá 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ữ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ản trì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ệ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, để áp dụng các mã CSS đặc biệt trê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ạ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 giả ngu 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 id=”wrapper”:

    Kế tiếp với đoạn mã tạo một lới 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ượ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 đối tượ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ại trừ IE :-L.
    Đây là một vấn đề phức tạp, bạn có thể xem bài viết này để 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:
    IE khô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 ;)) Đ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â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);
}

    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 ứng: Bằng cách sử dụng PHP để phát hiện trình duyệt dựa trên dịnh danh {browser agent} chú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, tuy nhiên cách làm này gây lãng phí tài nguyên máy chủ đơn giản vì trang web của bạn được gọi thường xuyên, banwidth tăng liên tục :D

Bài viết dựa trên bài Top 7 CSS hacks that we often use to solve common IE Problems. Bạn có thể xem bài viêt gốc để biết thêm.

Nội dung bài viết bị copy toàn bộ đưa lên Website NanoWings, tớ đã viết một vài comments nhưng đều bị xóa hết, x(

Quickly bookmark this content at   Post 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE to del.icio.us   Post 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE to digg.   Post 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE to NewsVine.   Post 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE to blinklist   Post 7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE to Furl

COMMENTS View topic's comments | ADD YOURS Add your own comments

Suggest topics:

Ngẫu nhiên hình ảnh bằng PHP
Dạ Cổ Hoài Lang - Cao Văn Lầu
Vương quốc các loài Khoai
Firefox 2.0 - The living version
PHP: on the day

Information

  1. This entry was posted on Monday, November 19th, 2007 at 9:03 pm by Narga and is filed under Phát triển Web.
  2. You can follow any responses to this entry through the RSS 2.0 feed.
  3. You can leave a response, or trackback from your own site.

2 Responses to “7 thủ thuật CSS thường dùng đối với các lỗi cố ý của IE”
icon

  1. 1

    Phần thủ thuật 1 viết tệ quá ;) Đọc xong ko hiểu gì cả. Đáng lẽ diễn đạt là chiều rộng bao gồm cả đường viền và khoảng cách với nội dung thì dễ hiểu hơn :D

    Phần đó liên quan đến cách xử lý box model hoàn toàn sai trong IE5, IE6. IE6 có fix nhưng chỉ fix trong chế độ standard mode, còn chế độ quirks mode thì không.

    Chế độ chế độ quirks mode (buggy CSS) được bật khi khai báo doc type ko có hay thiếu. Ví dụ bác vnexpress.net sinh HTML ở chế độ quirks mode. IE6 cũng bật quirks mode nếu có thẻ XML khai báo trước doc type. Chi tiết xem ở http://msdn2.microsoft.com/en-us/library/ms535242.aspx

    Theo chuẩn thì box model của 1 block element hiển thị như thế này

    Khi đó thuộc tính width chỉ là width của content
    Trong khi đó IE hiểu là width= content width + border + padding

    Và như thế thì khi làm web trên FF, hiển thị trên IE khối content bao giờ cũng nhỏ hơn. Nếu padding và margin = 0 thì không sao. Nhưng nếu padding = 10 chẳng hạn thì tổng độ rộng của khối sẽ tăng lên 10 trong khi đó IE giữ nguyên. Nghĩa là IE luôn bỏ qua border và padding.

    Điều này rất quan trọng với việc định vị khối. Ví dụ

    div#column1 {
    width: 100px;
    padding: 10px;
    border: 10px;
}

    Độ rộng chuẩn của #column1 sẽ là 140px trong khi đó bác IE là 100px. Vậy là bác IE sẽ hiển thị hở sườn rồi

    Hack thế này

    div#column1 {
    width: 100px; /* Mozilla/FF/Opera/Safari */
    padding: 10px;
    border: 10px;
}
/* FF/Opera/SF sẽ bỏ qua mấy cái dấu escape này */
div#column1 {
    \width: 140px; /* IE 5 and 6/quirks mode hiểu là độ rộng bị cài lại thành 140*/
    w\idth: 100px; /* IE6 standard mode thoát được escape nên set lại width về 100 và hiểu nó theo chuẩn */
}
    Posted by: icon pcdinh icon on November 27th, 2007 | 11:50 am
  2. 2

    Bạn Narga dịch à :D, cái này không thuyết phục lắm đâu :D. Mình sẽ viết lý do trong blog của mình :D. Có điều có thể tóm gọn là

    1) nên dùng Conditional CSS (kiểu if IE mà cậu minh họa)
    2) tránh mọi thứ hack khác.

    Posted by: icon Tuấn - CSS icon on December 7th, 2007 | 8:47 pm

Got something to say?


Bộ gõ Tiếng Việt: Off Telex VNI VIQR Mix (Bất kỳ kiểu nào)

New-design