Trình duyệt Chrome bản 39 khiến menu trên web bị lỗi xuống dòng và cách sửa lỗi

Tình hình là đợt vừa rồi có khách hàng gọi điện thông báo website của họ bị lỗi menu và các tiêu đề trên web họ bị lỗi xuống dòng. Mình thấy lạ vì mình đã kiểm tra web trước khi bàn giao trên các trình duyệt thông dụng @@ và không tin vào mắt mình với tấm ảnh thông báo lỗi từ khách hàng:

Vậy là mình kiểm tra lại thì cũng chẳng có lỗi gì (lúc đó mình chưa update trình duyệt). Mình cẩn thận update các trình duyệt trước để chắc chắn mới báo lại khách hàng + hỏi thêm thông tin phiên bản họ sử dụng. Nhưng… ôi thôi ĐÚNG CÁI LỖI ý sau khi update trình duyệt Chrome mới về… haizzzz

Vậy xử lý thế nào khi menu trên web bị lỗi xuống dòng này là việc mình phải khác phục ngay

Đây có thể là vấn đề mà nhiều người mắc phải, vì ngay sau khi “thấy lỗi” trên web khách mình kiểm tra các web khác cùng sử dụng menu ul li thì đúng là đều lỗi cả. Thậm chí mình còn kiểm tra ở các trang khác thì cũng nhận được lỗi tương tự.

Lỗi xuống dòng trên menu ul li dùng trình duyệt web Chrome 39 của blog CuKimNgoc.com

Lỗi xuống dòng trên menu ul li dùng trình duyệt web Chrome 39 của blog CuKimNgoc.com

Lỗi xuống dòng trên menu ul li dùng trình duyệt web Chrome 39 xem FMMSPolygon.com

Lỗi xuống dòng trên menu ul li dùng trình duyệt web Chrome 39 xem FMMSPolygon.com

Do menu ul li có thể khác nhau trong cách trình bày nên mình đề xuất 2 cách xử lý lỗi này (theo cách mình thấy cần thiết) như sau.

Cách khác phục menu trên web bị lỗi xuống dòng (trường hợp menu của bạn chỉ có 1 cấp).

Sau khi dùng dùng inspect elements mà trình duyệt Chrome hỗ trợ mình đã xử lý lỗi này bằng việc thêm thuộc tính css white-space:nowrap cho thẻ li hoặc thẻ a trong li là “mọi thứ lại trở lại bình thường”

Sau khi thêm/ sửa thuộc tính css white-space:nowrap thì mọi thứ đã hoạt động bình thường

Sau khi thêm/ sửa thuộc tính css white-space:nowrap thì mọi thứ đã hoạt động bình thường

Cách khác phục menu trên web bị lỗi xuống dòng (trường hợp menu của bạn chỉ có nhiều cấp – đa cấp) như các web trên mình đề cập.

Để xử lý trong trường hợp này bạn phải viết mã css cho level đầu tiên của menu tức là level chính như sau:

ul  > li  > a {
white-space:nowrap !important;
}

Mã css như trên ám chỉ rằng tất cả các thẻ a của level 1 (level root) của menu sẽ bị ảnh hưởng bởi thuộc tính white-space:nowrap, các level từ cấp 2 trở đi thì bình thường. Toán tử > giúp bạn xác định việc này.

Vậy thôi là bạn có thể xử lý lỗi này được rồi, mình đã kiểm tra và hoàn toàn khắc phục được lỗi này trên các website mình sở hữu, cũng như website khách hàng mà mình đang khắc phục.

Chúc mọi người giải quyết được vấn đề này để website mình hoạt động bình thường trên trình duyệt Chrome nhé ! Thân !

Related Posts

About The Author

15 Comments

  1. Avatar
    Cường
    21/01/2015
    • Polygon Express
      Cù Kim Ngọc
      21/01/2015
  2. Polygon Express
    Cù Kim Ngọc
    29/12/2014
  3. Avatar
    izwebsite.com
    29/12/2014
  4. Avatar
    Die Mannschaft
    27/11/2014
  5. Avatar
    Phước Đt
    27/11/2014
    • Polygon Express
      Cù Kim Ngọc
      27/11/2014
  6. Avatar
    Man Pham
    27/11/2014
    • Polygon Express
      Cù Kim Ngọc
      27/11/2014
  7. Avatar
    chung
    27/11/2014
    • Polygon Express
      Cù Kim Ngọc
      27/11/2014
  8. Avatar
    Người Say
    26/11/2014
    • Polygon Express
      Cù Kim Ngọc
      26/11/2014
      • Avatar
        Người say
        26/11/2014
        • Polygon Express
          Cù Kim Ngọc
          26/11/2014

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.