menu rớt xuống ở google chrome ( do xài chrome 39)

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 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

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 !

link website: http://cafefreelancer.com/vi/trinh-duyet-chrome-ban-39-khien-menu-tren-web-bi-loi-xuong-dong-va-cach-sua-loi.html