2009-12-04 22 views
9

Gần đây, tôi đã chiến đấu với: biên giới/lề bảng kỳ lạ, sắp xếp div, vấn đề định vị và đang có cơn ác mộng bên phải hỗ trợ Internet Explorer 6. Tôi biết rất nhiều bạn như tôi buộc phải hỗ trợ, IE6-IE8 , Web-Kit và các trình duyệt dựa trên Mozilla.Có thể thực hiện các bước nào để tránh các vấn đề tương thích với trình duyệt chéo?

Câu hỏi của tôi cho bạn là:

  1. các quy tắc quan trọng bạn sử dụng trước khi tay là gì, khi phát triển trên nhiều trình duyệt để bạn tiết kiệm thời gian?
  2. Làm cách nào để ngăn không cho bạn viết các thẻ không tương thích?
  3. Cách tốt nhất để tránh hack mã của bạn là gì?
  4. Bạn tìm thấy nghiên cứu về tính tương thích của trình duyệt ở đâu, bạn có sử dụng bất kỳ công cụ nào không?
  5. Cuối cùng, khi nào bạn vượt qua dòng/bạn vẽ nó ở đâu?

Trả lời

6
  1. Tôi thường mã chống lại Firefox (hoặc Safari) trước. Điều đó thường tạo ra kết quả tốt nhất trên các trình duyệt khác ngoài IE. Sau đó tôi nhấn IE8, IE7, rồi cuối cùng là IE6.

  2. Biết thẻ nào sẽ gây rắc rối cho bạn và tránh sử dụng chúng bằng mọi giá. Đó là tất cả về cách làm quen với các vấn đề của mỗi trình duyệt.

  3. Không sử dụng hack. Sử dụng bình luận có điều kiện của IE. Bằng cách sử dụng bình luận có điều kiện, bạn có thể tải một biểu định kiểu cho tất cả các trình duyệt khác, một cho IE8, một cho IE7, và một cho IE6 (nếu bạn cần loại chi tiết đó để khắc phục sự cố của bạn). Nó sẽ cung cấp cho bạn các bảng định kiểu sạch đẹp với ít hack-i-ness nhất có thể.

  4. LitmusApp

  5. Có thực sự không phải là dòng để vượt qua. Nếu bạn cần khả năng tương thích, bạn cần khả năng tương thích. Bạn chỉ cần giải quyết các vấn đề của bạn tốt nhất có thể tại một thời điểm cho đến khi bạn có một thứ có thể sử dụng được.

+0

litmus, có vẻ thú vị tôi sẽ đi khám phá thông qua nó cảm ơn bạn .. – Andrew

3

tôi nói có là không có nhiều bạn có thể làm ngoại trừ gắn bó với những điều cơ bản:

  • tiêu chuẩn Mã compliant HTML
  • Validate sớm, xác nhận thường
  • Đối với Javascript, sử dụng một khuôn khổ như JQuery, Prototype hoặc Dojo
  • Chọn một "trình duyệt chính" mà bạn tối ưu hóa trước tiên.

trong mọi dự án, sẽ có một số vấn đề, nhưng nếu bạn tuân theo các điểm này, không quá nhiều.

Tôi thấy cực kỳ hữu ích khi tạo mã hợp lệ W3C 100%. Không phải vì nó quan trọng - phần lớn những gì trình duyệt tính hợp lệ của W3C phàn nàn sẽ không tạo ra bất kỳ sự khác biệt nào trong các trình duyệt thế giới thực - nhưng bởi vì có thể chạy một xác thực, và nhận được ánh sáng màu xanh lá cây và biết rằng tất cả đều tốt trên kết thúc đó là rất hữu ích.

Để kiểm tra nhiều phiên bản IE cùng một lúc, bạn có thể sử dụng IETester. Nó không phải là hoàn hảo - bình luận có điều kiện sẽ không hoạt động trong nó - ví dụ, nhưng chủ yếu có thể sử dụng trong công việc phát triển hàng ngày.

+0

Cảm ơn bạn :) Tôi sẽ cung cấp cho IETester một bước đi, ngay cả với các khuôn khổ như jquery tôi vẫn gặp khó khăn trong việc đưa mọi thứ vào hoạt động. Tôi cố gắng tránh sử dụng chúng để sửa bất kỳ vấn đề về kiểu dáng nào, nhưng đôi khi tôi thấy không có lựa chọn nào. Đặc biệt là để điều chỉnh chiều cao, đây có phải là điều xấu để làm không? – Andrew

1

sử dụng loại tài liệu như html 4.1 chuyển tiếp làm cho ie6 hiển thị trong mã chuẩn. Bạn cũng có thể sử dụng bảng định kiểu đặt lại.

+0

http://meyerweb.com/eric/tools/css/reset/ – Bart

4

Tôi muốn bắt đầu với mã tuân thủ tiêu chuẩn. Luôn thử nghiệm trong trình duyệt tuân thủ tiêu chuẩn trước tiên như Firefox hoặc Safari/Chrome. Tôi thích Firefox cho các addons (như Firebug, HTTPFox và Web Development Bar). Sau đó làm việc theo cách của bạn DOWN (và xuống, tôi có nghĩa là tất cả các phiên bản của Internet Explorer).

Cố gắng tránh xa các bản sửa lỗi tạm thời cho mỗi trường hợp hoặc trang web và tổng quát mã của bạn càng nhiều càng tốt. Ví dụ, như Justin Neesner đã nói trong câu trả lời của mình, sử dụng các bình luận có điều kiện và một bảng định kiểu chung cho IE6, 7 và 8 sẽ loại bỏ hầu hết các vấn đề của bạn với bố cục và định dạng mà không cần sử dụng quá nhiều. Bạn có thể sử dụng lại các bảng định kiểu IE và chỉ đặt mã trang web cụ thể trong đó.

Sử dụng nền tảng thử nghiệm như trình duyệt web, netrenderder hoặc LitmusApp để bạn có thể xem những gì trang web của bạn đang làm trong nhiều phiên bản của trình duyệt. Nghiên cứu khả năng tương thích trình duyệt sâu sắc sẽ khiến bạn kéo tóc ra, nhưng bất kỳ tài nguyên nào tuyệt vời như quirksmode.org đều có thể cung cấp cho bạn thông tin về những người không thích hợp, vì vậy bạn không bị điên và hói.

Theo như khi nào tôi vượt qua/vẽ đường, đó là 99% sự cố Internet Explorer và nếu nó đủ gần để trông giống như FF hoặc Chrome/Safari, tôi đã hoàn tất. Hầu như giống như nghệ thuật, nó không phải là khi bạn hoàn tất việc thêm, đó là khi bạn đã hoàn thành việc gỡ bỏ crap mà bạn không muốn thấy; đó là khi bạn biết nó được thực hiện.

+0

Vì vậy, tôi đã duyệt qua, quirksmode.org, trang web này là thực sự tuyệt vời :) cảm ơn bạn. – Andrew

+0

Vui vì bạn thích nó. Tôi phát hiện ra nó trong một tìm kiếm cho min-height và max-height trong IE6. Cố gắng để làm cho một bố trí mà không có thể là một nỗi đau thực sự đôi khi! – tahdhaze09

1

Sử dụng đánh dấu HTML và CSS tuân thủ nghiêm ngặt và không sử dụng tiện ích mở rộng độc quyền của trình duyệt cho CSS.

IE 6 không triển khai CSS đúng cách bắt đầu bằng sự thiếu hiểu biết tuyệt đối của mô hình hộp.

Mặt khác, IE 8 có bộ kiểm tra để chứng minh rằng chúng thực hiện mọi khía cạnh của CSS 2.1 một cách chính xác (không có trình duyệt nào khác).

Phát triển Firefox như đã nêu ở trên và đưa ra quyết định về hỗ trợ IE 6 & 7 hoặc không. Thành thật mà nói, tôi không còn phát triển các tờ định kiểu riêng biệt cho các trình duyệt đó nữa. Họ không có đủ thị phần (ít nhất là trên trang web của tôi.)

Vì sự quan tâm đến HTML 5 và thiếu sự quan tâm đến XHTML 2, phát triển HTML 4.01 nghiêm ngặt và thực hiện theo các thực tiễn sau: (được đề xuất trong HTML 4, và yêu cầu trong HTML 5 và XHTML 1,1)

  1. tất cả các yếu tố và thuộc tính tên phải xuất hiện trong trường hợp thấp hơn,
  2. tất cả các giá trị thuộc tính phải được trích dẫn,
  3. Elements phi rỗng đòi hỏi phải có thẻ đóng,
  4. không cho phép giảm thiểu thuộc tính,
  5. Ở chế độ Nghiêm ngặt, tất cả các phần tử nội dòng phải được chứa trong phần tử khối.

Why to learn HTML 4.01 Strict with references.

0

Vì vậy, tôi đã được chạy xung quanh một lúc bây giờ, 26 ngày sau đó tôi nghĩ rằng tôi đã sẵn sàng để đưa ra một số thông tin phản hồi để phát hiện của tôi.

Mã hóa:

Trước hết, tôi thấy rằng hệ thống cột dường như giảm bớt số lượng của HTML và CSS bằng văn bản. Họ cũng rất thân thiện với trình duyệt. Mặc dù có rất nhiều trong số họ, tôi thấy rằng các 960 Grid System làm việc tốt nhất cho tôi: http://960.gs

Tiếp theo tôi thấy rằng Ruby có một phần mở rộng mát mẻ cho CSS gọi, LESS. Điều này đã được chuyển sang .NET và có thể được tìm thấy tại: http://www.dotlesscss.com. Nó rất dễ cài đặt và rất mạnh mẽ khi được sử dụng đúng cách.

Javascript, có thể phức tạp nhưng tôi phát hiện ra rằng việc tránh một số bộ chọn và phím tắt trong các ngôn ngữ như JQuery sẽ không chỉ tăng tốc hiệu suất của ứng dụng mà còn thể hiện hành vi khó xử hơn.

Kiểm tra các trình duyệt:

Ở đây có phần thú vị. Nếu không có bất kỳ phần mềm nào, tôi thấy rằng việc thử nghiệm các ứng dụng của mình chống lại Internet Explorer 6 và Safari thực sự đã giúp tăng tốc độ phát triển của tôi. Firebug và Firefox thực sự khiến tôi phát triển xung quanh các vấn đề và đây là nguyên nhân gây ra nhiều mã bổ sung. Khi phát triển mã đơn giản chống lại IE6 và Safari, tôi thấy rằng việc quay trở lại Firefox và IE8 là cực kỳ dễ dàng hơn. Hầu hết các vấn đề tôi gặp phải đều có độ rộng đường viền, đó là các bản sửa lỗi dễ dàng.

Giải pháp phần mềm tốt nhất mà tôi thấy có thể truy cập được là Expression Web với Superpreview, nếu bạn tự hỏi tại sao Microsoft phát hành một phiên bản IE, có lẽ họ có thể bán cho bạn các công cụ như thế này.

Dù sao, đó là 2 xu của tôi ngay bây giờ.

Các vấn đề liên quan