• fans
  • 1036 reader
  • followers

IE 6 là trình duyệt “bệnh” nhất trong các trình duyệt. Những ai đã từng làm web cũng luôn phải đau đầu vì trình duyệt này. Bởi vì nó được thiết kế không theo chuẩn web. Khi giao diện của bạn được hiển thị rất tốt ở các trình duyệt hiện đại như FireFox, Chrome, Safari … nhưng nếu thử trên IE 6 có khi bạn không nhận ra trang web của mình nữa. Trong video này chúng ta sẽ tìm hiểu những lỗi phổ biến nhất của IE 6 và cách khắc phục chúng


Trong bài này chúng ta sẽ xem xét những lỗi sau của IE 6 và cách khắc phục từng lỗi

  • Double Margin xảy ra khi mình đặt một thành phần float: left và đặt margin-left cho nó
  • Lỗi “bậc thang” xảy ra với list khi bạn cho nó float: left
  • Hack IE 6 để nó có hiệu ứng hover với tất cả các thành phần
  • Lỗi Transparent với PNG, xảy ra khi bạn sử dụng định dạng PNG. IE 6 sẽ hiển thị một màu mờ mờ thay vì trong suốt
  • Cách sử dụng conditional stylesheet
    • Thời lượng:33:24

      Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire

      File Size: 81.9MB

      File download trong video: iepngfix.htccsshover3.htc

      Mới cập nhật (8/4/10)

      Hack lỗi căn giữa trang web

      Bạn cũng biết là chúng ta có thể sử dụng CSS để căn giữa trang web với thuộc tính margin: 0 auto, nhưng IE 6 không hiểu được thuộc tính này và hậu quả là nó bị lệch sang trái. Cách sửa như sau:

      body {text-align: center;}
      #wrapper {text-align: left; width: 1000px; margin: 0 auto;}

      Ban đầu chúng ta dùng thuộc tính căn lề giữa cho toàn bộ trang cho thẻ body, IE 6 nó hiểu phần này và cho cả trang web ra giữa. Nhưng mọi thứ đều bị căn giữa hết kể cả chữ, cho nên chúng ta phải áp dụng lại thuộc tính text-align: left cho #wrapper

      Lỗi min-height trong IE 6

      Thuộc tính min-height trong CSS rất hữu dụng khi bạn cần đặt một độ cao tối thiểu cho một thẻ div chẳng hạn. Ví dụ bạn không muốn thẻ div nào đó có độ cao nhỏ nhất là 200px. Với trình duyệt thường thì không có vấn đề, nhưng với IE 6 nó không hiểu được thuộc tính này gây ra rất nhiều phiên toái. Cách sửa bạn có thể làm như sau:

      selector {
        min-height:200px;
        height:auto !important;
        height:200px;
      }

      Chẳng may chó ngáp phải ruồi hay sao mà IE 6 lại có thể hiểu được thuộc tính height: 200px như các trình duyệt hiện đại đọc thuộc tính min-height.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • Quỳnh Anh

    cảm ơn anh , video rất hữu ích. nhưng cho em hỏi là sao hình ảnh của em chạy bên firefox thì ok nhưng khi em dùng ietester ie6 thì lại nhảy lung tung, còn cái phần hình ảnh như trên video khi chuyển sang ie6 thì em không thể nào sửa đc như a là sao hay là vì em cop file download ở trên vào file project không đúng

  • huy

    mình dùng win 7 không có ie6, mà dùng ietester thì cái debugbar nó đòi key mới dùng được, bi h không biết sửa lỗi trên ie6 bằng cách nào bây giờ
    các bạn có cách gì khắc phục không

  • quang

    Các bạn giúp mình xem bệnh trang của mình với, đã bị lỗi hiển thị vỡ trang này trên IE lâu rồi mà mình ko biết cách sửa: http://tranhchuthap.com/
    Các trình duyệt khác ko vấn đề gì
    Giúp mình với nhé,
    Thanks so much!

  • http://elive.vn dinh tam

    Cảm ơn izwebz.com, các bạn có thể xem thêm một số thủ thuật fix css cho tất cả các trình duyệt tại đây http://elive.vn/lap-trinh/247-code-hack-css-cho-tat-ca-cac-trinh-duyet-web.html

  • Nguyen

    Anh Daemon ơi.
    Bây giờ đã có cách nào để fix background là png chưa ạ?

  • http://vehangngay.com TikTok

    Nhưng bài viết của anh quá tuyệt vời,em có thể giúp gì cho izweb ko ạ:H

  • http://www.iabm.edu.vn tran cao dung

    Tôi có một lỗi khi tét trên IE 6 mong mọi người giúp đở!
    tôi đã làm xong trang web và dùng ietester để test, mọi ie 7,8,9 đã làm xong riêng ie 6 là tào lao nhất, về lỗi giao diện thì tôi đã khắc phục hết, nhưng có 1 lỗi mà tôi mới gặp nên không bit cách giải quyết, đó là test, khi hiện lên thì chỉ thấy dòng test nhưng lại không có link, nghia là khi rê chuột vào không có hình bàn tay, tuy nhiên, link ở những chổ khác thì vẫn bình thường, tôi đang cố gắng tìm lỗi này, nếu bạn nào bit thì chỉ giúp tôi nhiên !
    xin chân thành cảm ơn !!!!

    • http://hehe.com hehe

      Bạn sử dụng thuộc tính cursor: pointer; xem

      • Invisible

        Bạn thử sử dụng 1 liên kết đầy đủ theo dạng href=”http://yoursite.com/something” thử xem sao.

      • Invisible

        Bạn thử sử dụng 1 liên kết đầy đủ theo dạng test thử xem sao. HÌnh như IE6 chỉ có link đầy đủ mới hiện cursor

  • kakkadragon

    Cảm ơn DW rất nhiều. Mình cũng đã từng gặp các vấn đề trên, mò tìm đến là khổ sở với IE 6; nếu xem được video này sớm thì đã tiết kiệm được khối thời gian rồi.
    P/S: đối với background là png, vẫn có thể fix được cho IE 6 bằng iepngfix

  • huynh trong dai

    Chào anh DW,

    Anh sao mình nhúng cái csshover3.htc vào trong the body để fix cái hover thi lại lỗi khi test thử bằng IETESTER. trong hai file anh cho dow về là csshover3.htc và iepngfix.htc nhưng chỉ có mỗi iepngfix.htc là ok còn cái kia thì lỗi. Anh xem lại dùm em hen thanks anh nhiều

    http://www.mediafire.com/?m923bmc82zse6

  • http://ictdaklak.vn/krongnang Khánh Tâm

    Đây là trang đầu tay của em, sau khi học hỏi các video của Anh, về cách xây dựng một temmplate chuẩn. Tuy nhiên, hiện Trang web này đang gặp lỗi trên IE6 và IE7. Các trình duyệt khác và IE8 thì đều ổn.Hiện tại, em đang cố gắng tìm cách sửa lỗi, nhưng vẫn chưa xác định được nguyên nhân chính.Rất mong được Anh giúp đỡ. Xin chân thành cảm ơn!

  • Nguyễn Văn huy

    Anh ơi ! Anh giúp em chút xíu ! Anh có thể nói rõ hơn về conditional stylesheet ! nếu được anh làm 1 ví dụ nhỏ cũng được anh nhé ! em có thử làm theo video mà anh hướng dẫn về lỗi trong IE 6 và cách khắc phục ! nhưng khổ nỗi khi làm như vậy mở IEtester ra thì chỉ có IE 6 chạy được ! còn các IE khác không chạy (chạy ra màn hình trắng trơn ) ! Anh giúp em với em cần lắm ! Em cám ơn anh nhiều !

  • http://tmpccc.com Thuận Thuyên

    Chào anh DW,

    Em bị cái lỗi png mở IETester chạy trên localhost tốt nhưng lên host thì lại không được, không biết thế nào nữa, mong anh cho chút kinh nghiệm.
    Xin cảm ơn

    Thuận Thuyên

  • http://khonggiantre.com vinhnt

    Cảm ơn Demon Warlock, video sẽ giúp rất nhiều người làm web giải quyết được những lỗi cơ bản trên IE 6

  • Kien

    Anh DW ơi cái lỗi Dropdown menu em làm không dc, em thử làm theo đúng VD của anh trên video thì dc, nhưng chỉ cần gắn vào một trang khác là không dc luôn, em thử vài cái rồi nhưng mà vẫn không dc ( nó vẫn không sổ menu con khi hover ) không biết tại sao anh có thể giải thích giúp em dc không.

  • Kien

    Dear Mr Demon Warlock & Mr NickB.

    Em cắt CSS với IE 6 bị một cái lỗi rất là chuối em đã tìm các khắc phục nhưng mà không được anh xem hộ em với em gửi anh link file words anh vào và xem dùm em với. Thanks các anh nhiều

    http://www.mediafire.com/?xon9bdksqm463at

  • http://www.izwebz.com Demon Warlock

    Flash không phải là công nghệ anh thích để làm web, cho nên sẽ không có bài nào về flash trên izwebz cả.

  • thần gầy

    anh DW anh chuyên làm tut dạy về thiết kế web thế sao không có bộ tut nào dạy về banner flash hay web flash

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives