Cách Quản lý Trình duyệt không tương thích cho lập trình HTML5 và CSS3 - núm vú

Video: Diseño Web 05 - Especificaciones Técnicas 2025

Mặc dù tất cả các trình duyệt hiện đại quản lý CSS3 khá tốt những ngày này, Internet Explorer (đặc biệt là các phiên bản trước đó) nổi tiếng vì làm việc theo những cách không chuẩn. Dưới đây là một vài thủ thuật để giúp bạn đối phó với sự không tương thích.

Làm thế nào để làm cho Internet Explorer-specific code

Bạn sẽ dễ dàng hơn để xem cách các nhận xét có điều kiện hoạt động bằng cách xem một ví dụ đơn giản và sau đó xem làm thế nào để sử dụng mẹo bình luận có điều kiện để sửa các vấn đề không tương thích CSS.

Đây là một trang đơn giản với Firefox.

Ở đây nó được hiển thị trong IE 7.

Hãy xem mã cho IEorNot. html và xem nó hoạt động như thế nào.

IEorNot. html

Bây giờ tôi sẽ sử dụng một nhận xét có điều kiện để xác định trình duyệt của bạn. Tôi sẽ cho bạn biết nếu bạn đang sử dụng IE.

Bạn đang sử dụng IE

Chỉ có một phần mới là những nhận xét lạ:

Bạn đang sử dụng IE

Nhận xét có điều kiện là một tính năng đặc biệt chỉ có trong Internet Explorer. Chúng cho phép bạn áp dụng thử nghiệm cho trình duyệt của mình. Bạn có thể đặt bất kỳ mã HTML nào bạn muốn giữa và

Vì vậy, khi bạn nhìn vào WhatBrowser trong trình duyệt IE, nó sẽ thấy lời nhận xét có điều kiện, tự nhủ, "Tại sao phải, tôi là Internet Explorer" và hiển thị tiêu đề "Sử dụng IE". Nếu bạn nhìn vào cùng một trang với Firefox, trình duyệt không hiểu nhận xét có điều kiện nhưng thấy một bình luận HTML (bắt đầu bằng

Làm thế nào để sử dụng một bình luận có điều kiện với CSS

Các nhận xét có điều kiện riêng của họ không phải là thú vị, nhưng chúng có thể là một công cụ hữu ích để tạo CSS tương thích. Bạn có thể sử dụng các ý kiến có điều kiện để tạo ra hai tờ kiểu dáng khác nhau, một trong đó làm việc cho IE và một trong đó làm việc với mọi thứ khác.

Hầu hết các trình duyệt sẽ đọc một trang định dạng chuẩn tạo ra nền màu vàng.

Nếu trang được hiển thị trong IE, nó sử dụng một trang tính thứ hai.

Nhìn vào mã, và bạn sẽ thấy nó giống như IEorNot. trang html.

WhatBrowser. html Trang này có nền đỏ trong IE, và nền màu vàng trong các trình duyệt khác.

Nếu bạn muốn một trang sử dụng các kiểu khác nhau trong trình duyệt IE và các trình duyệt khác, hãy thực hiện theo các bước sau:

Xác định kiểu mặc định đầu tiên.

Bắt đầu bằng cách tạo ra phong cách sẽ làm việc trong hầu hết các trình duyệt. Hầu hết thời gian, phong cách này cũng sẽ làm việc trong IE. Bạn có thể tạo kiểu ở cấp trang (với cặp) hoặc bên ngoài (có thẻ).
Tạo nhận xét có điều kiện trong tiêu đề.

Tạo một nhận xét có điều kiện sau kiểu chính, như thể hiện trong đoạn mã này.
Xây dựng một phong cách riêng cho trình duyệt mới trong nhận xét.

Phong cách bên trong nhận xét sẽ chỉ được áp dụng cho các trình duyệt IE, chẳng hạn như trong các dòng sau:
```
body {background-color: red; màu sắc: màu vàng;} 
```
Phong cách nhận xét có thể là cấp trang hoặc bên ngoài.

Giống như kiểu mặc định, bạn có thể sử dụng cặp để tạo kiểu trang, hoặc bạn có thể sử dụng thẻ để kéo trong một trang định kiểu bên ngoài.
Chỉ đặt mã giải quyết các sự cố IE trong phong cách có điều kiện.

IE sẽ đọc mã trong cả hai kiểu, vì vậy không cần lặp lại mọi thứ. Sử dụng kiểu có điều kiện chỉ cho những khu vực mà IE không làm những gì bạn mong đợi.
Đừng quên kết thúc nhận xét có điều kiện.

Nếu bạn để lại kết thúc bình luận có điều kiện của bạn, hầu hết trang của bạn sẽ không xuất hiện. Điều đó có thể là xấu.

Kiểm tra phiên bản Internet Explorer

Bạn có thể chỉ định phiên bản IE mà bạn đang sử dụng. Điều này rất quan trọng với CSS có thể định vị được vì các phiên bản IE7 và phiên bản sau này hoạt động khá tốt với mã tương thích chuẩn, nhưng các phiên bản trước đó thì không. Bạn có thể sử dụng biến thể này để chỉ định mã cho IE 6 và các phiên bản trước đó.

… < →

Cách sử dụng thiết lập lại CSS

Ngay cả khi các trình duyệt đồng ý về yếu tố CSS nào để kết hợp, đôi khi chúng khác với các chi tiết thực tế. Ví dụ: họ có thể chọn các lề và lót khác nhau cho các phần tử trong danh sách. các nhà phát triển web thường sử dụng một kiểu CSS đặc biệt gọi là css reset .

Đây chỉ là tệp tin CSS bên ngoài xác định rõ ràng chi tiết của mỗi phần tử. Khi bạn sử dụng thiết lập lại CSS, bạn ít có khả năng bị ngạc nhiên bởi sự khác biệt giữa các trình duyệt. Một số resets tuyệt vời có sẵn để sử dụng miễn phí từ cssreset. com.

Mặc dù thiết lập lại trang là một ơn trời dành cho nhà thiết kế, chúng làm chậm tải trang và thời gian dựng hình một chút. Bạn không nên sử dụng thiết lập lại trang như CSS duy nhất, nhưng sửa đổi nó cho phù hợp với nhu cầu cụ thể của bạn. Ngoài ra, bạn sẽ thấy rằng các lần đặt lại không quan trọng cho đến khi bạn quan tâm rằng mọi thứ hoạt động giống nhau trên mọi trình duyệt.