Xử lý lỗi thẻ marquee trong trình duyệt Chrome

updated on 2022-11-03

Vì sao có sự khác nhau giữa các trình duyệt? (h3)

Khi viết CSS cho trang web chúng ta hay gặp phải vấn đề là ở trình duyệt này thì chạy ok nhưng sang trình duyệt khác thì không đúng như mong đợi. Lý do tại sao? Đó là vì trình duyệt nào cũng cài đặt sẵn style sheet ngầm định cho các thẻ HTML và chế độ style sheet ngầm định này lại khác nhau đối với các trình duyệt khác nhau.

Firefox là một trình duyệt phổ biến, nó ít thay đổi style sheet các thẻ vì vậy nên được các lập trình viên ưa dùng để test HTML và CSS. Còn Chrome là một trình duyệt ra sau và cài đặt khá nhiều style ngầm định cho các thẻ. Vì vậy khi viết CSS chúng ta đôi khi không kiểm soát được “vẻ ngoài” của trang web.

Chúng ta đã biết thứ tự ưu tiên của CSS như sau:

1) Trình bày theo style sheet  on-page (là style sheet khai báo ngay trong thẻ HTML)

2) Trình bày theo style sheet của trình duyệt (là những gì trình duyệt muốn cho bạn

thấy)

3) Trình bày theo style sheet trong file CSS

4) Trình bày theo style sheet quy định bởi HTML

Do vậy nếu muốn khắc phục các lỗi trình duyệt, các bạn cần phải xử lý ngay trong thẻ HTML

Ví dụ xử lý lỗi thẻ marquee hiển thị khác nhau trong firefox và chrome (h3)

Dưới đây là một ví dụ xử lý sự khác nhau giữa firefox và chrome khi các bạn viết CSS. Sự khác biệt này xảy ra với thẻ marquee là thẻ cho các đối tượng chạy ngang hoặc dọc trên màn  hình.

Đây là code ban đầu

Khi chạy code này, với firefox, mọi thứ có vẻ êm ru, đoạn thẻ marquee nằm trong một ô bên phải của table và chiếm 50% kích thước của table. còn ô bên trái trình bày một đoạn text

Tuy nhiên trong chrome, thẻ marque bắt đầu bị vỡ trận, nó có vẻ bị đẩy xuống dưới 1 hàng và lấy gần hết chiều ngang của table, đẩy đoạn text trong ô bên trái thu lại và tràn xuống dưới

Và dưới đây là đoạn code đã sửa lỗi, trong đó tác giả thêm vào một đoạn style sheet on-page định nghĩa chiều rộng của thẻ marque cố định là 480 (bằng nửa chiều rộng của thẻ table) và đồng thời cho nó hiển thị dưới dạng inline-block

Kết quả là đã khắc phục được lỗi trình duyệt chrome.

   

 

1) Trình bày theo style sheet on-page (là style sheet khai báo ngay trong thẻ HTML)2) Trình bày theo style sheet của trình duyệt (là những gì trình duyệt muốn cho bạnthấy)3) Trình bày theo style sheet trong file CSS4) Trình bày theo style sheet quy định bởi HTMLDo vậy nếu muốn khắc phục các lỗi trình duyệt, các bạn cần phải xử lý ngay trong thẻ HTMLVí dụ xử lý lỗi thẻ marquee hiển thị khác nhau trong firefox và chrome (h3)Dưới đây là một ví dụ xử lý sự khác nhau giữa firefox và chrome khi các bạn viết CSS. Sự khác biệt này xảy ra với thẻ marquee là thẻ cho các đối tượng chạy ngang hoặc dọc trên màn hình.Đây là code ban đầuKhi chạy code này, với firefox, mọi thứ có vẻ êm ru, đoạn thẻ marquee nằm trong một ô bên phải của table và chiếm 50% kích thước của table. còn ô bên trái trình bày một đoạn textTuy nhiên trong chrome, thẻ marque bắt đầu bị vỡ trận, nó có vẻ bị đẩy xuống dưới 1 hàng và lấy gần hết chiều ngang của table, đẩy đoạn text trong ô bên trái thu lại và tràn xuống dướiVà dưới đây là đoạn code đã sửa lỗi, trong đó tác giả thêm vào một đoạn style sheet on-page định nghĩa chiều rộng của thẻ marque cố định là 480 (bằng nửa chiều rộng của thẻ table) và đồng thời cho nó hiển thị dưới dạng inline-blockKết quả là đã khắc phục được lỗi trình duyệt chrome.