Css trên Chrome bị lỗi và cách khắc phục

Vừa qua trình duyệt nổi tiếng Chrome của Google được cho là dính phải một số lỗi hiển thị css.
Sau khi tìm hiểu, thì lỗi này chỉ xuất hiện trên bản cập nhật số 39, cụ thể là bản 39.0.2171.65
Lỗi này phát sinh được dự đoán một phần do độ phân giải màn hình, một phần khác nhiều khả năng hơn là do lỗi lập trình chuẩn của thiết kế viên bỏ qua những chỗ mà thông thường các trình duyệt đều hiển thị đúng.

khắc phục lỗi css xuống dòng cho chrome 39 8

Facebook là một trong những trang web có lượt truy cập nhiều nhất thế giới cũng bị lỗi hiển thị trên chrome mới

Tuy nhiên, hãy khoan đổ lỗi cho Lập trình viên, cho Chrome,.. trong bài viết này chúng ta sẽ đề cập đến việc khắc phục lỗi đó từ các khía cạnh khác nhau như thế nào.

I. Với phương diện người dùng, theo chia sẻ của Admin diễn đàn đồ họa vietdesigner, có 2 cách khắc phục.

Cách thứ nhất, đơn giản và không mất công suy nghĩ, đó là chờ bản cập nhật thứ 40 của chrome hoặc tải bản chrome 38 về tại địa chỉ:
http://dl.google.com/chrome/win/38.0.2125.101_chrome_installer.exe
Tuy nhiên cách này có vẻ như không mấy khả quan lắm khi mà chúng ta ngày ngày giờ giờ sử dụng trình duyệt này để duyệt web, online,..

khắc phục lỗi css xuống dòng cho chrome 39 1

Một website bị lỗi hiển thị css trên chrome bản cập nhật thứ 39

Cách thứ hai, Enable một vài tính năng thử nghiệm trong Chrome Flags, cách làm như sau:
1 - Trên thanh địa chỉ, gõ:
    chrome://flags

khắc phục lỗi css xuống dòng cho chrome 39 6

2 - Tìm phần Tắt(Disable) DirectWrite và ấn chọn Bật(Enable)

khắc phục lỗi css xuống dòng cho chrome 39 7

3 - Khởi động lại Chrome.

Hai cách trên, được chỉ định dành cho người dùng, và tất nhiên là không có cách nào được khuyến khích. Nhưng biết làm sao được. Đành phải vậy thôi.

II. Với phương diện là những coder, designer, thì hiển nhiên chúng ta sẽ sửa theo cách riêng của chúng ta.
1 - Như hình minh họa thứ hai, websiste bị lỗi css khá nhiều trên thanh menu. Chúng ta hãy click chuột vào các chỗ lỗi và mở developer tools của chrome lên:

khắc phục lỗi css xuống dòng cho chrome 39 2

2 - Tìm đến các class/id css bị lỗi hiển thị trong file css

khắc phục lỗi css xuống dòng cho chrome 39 3

3 - Thêm đoạn thuộc tính css sau vào class/id đang bị lỗi:

white-space: nowrap;

khắc phục lỗi css xuống dòng cho chrome 39 4

4 - Save css lại.

khắc phục lỗi css xuống dòng cho chrome 39 9

Người dùng của bạn sẽ chẳng phải khó chịu khi vào một trang web toàn lỗi css nhìn không bắt mắt nữa.

khắc phục lỗi css xuống dòng cho chrome 39 5

Trên đây là một số cách để mọi người tham khảo, có thể còn nhiều cách đơn giản khác, nhưng hi vọng nó sẽ giúp ích cho các bạn trong khi duyệt web và thiết kế web.

P/s: Tất nhiên còn một cách nữa, không phải mất nhiều công sức như 3 cách trên. Đó là thay vì sử dụng chrome, hãy sử dụng Firefox.

Nguồn: Thiết kế web chuyên nghiệp.

Vui lòng ghi rõ nguồn nếu bạn post lại bài viết này ở nơi khác.

Xin cảm ơn.

Bài viết mới nhất

Google Plus

HotLine 0945 518 538

Tel 0906 308 380

Email : thietkeweb.123corp@gmail.com

Trụ sở chính: 60 Nguyễn Đình Chiểu, P.Đakao, Q.1, TPHCM
VPĐD: 14 Phạm Quý Thích, P.Tân Quý, Q.Tân Phú, TPHCM

Hotline 1: 0945 518 538 Email: thietkeweb.123corp@gmail.com
Back To Top