Công nghệ của DZR

Tất cả các trình duyệt có lỗi. Sự phát triển web tốt không đơn giản chỉ yêu cầu mã văn bản tuân thủ các tiêu chuẩn mà còn viết ra xung quanh những thiếu sót của các đại lý người dùng phổ biến và các trình duyệt. Dưới đây là một số lưu ý kỹ thuật ghi lại lỗi trình duyệt, cách giải quyết và phát triển web khác và các kỹ thuật tác giả.

Định vị phải trong Internet Explorer

Hầu hết các trang ở DZR (như trang này, sử dụng bảng định kiểu “Dark”) có cột bên phải có chiều rộng cố định và cột bên trái có chiều rộng của cột. Chúng tôi đã gặp vấn đề Internet Explorer thú vị khi thiết kế bố cục này. Mã gốc đặt cột bên trái bằng cách sử dụng vị trí tuyệt đối với các giá trị được đặt cho đầu, trái và phải. Tuy nhiên, điều đó đã không làm việc trong IE5 / Mac (mặc dù nó đã làm việc trong tất cả các trình duyệt khác phù hợp với CSS). Lần thử thứ hai của chúng tôi sử dụng vị trí tuyệt đối với các giá trị chỉ dành cho đầu và bên trái và thay vào đó đặt lề phải để văn bản không tràn sang cột bên phải. Điều đó đã cố định vấn đề IE5 / Mac, và đã làm việc trong Opera và Mozilla / NS6, nhưng gây ra IE6 / Win để hiển thị trang giống như IE5 / Mac đã ban đầu! Cuối cùng, chúng tôi đã phát triển một cách giải quyết, được ghi lại trong trường hợp thử nghiệm này (xem mã nguồn của bài kiểm tra để xem tài liệu đầy đủ).

Đã cập nhật! (Ngày 1 tháng 5 năm 2002) Sửa lỗi IE5.0 / Win vào ngày 29 tháng 1 năm 2002 đã phá vỡ IE5.x / Mac. Một giải pháp mới đã được thêm vào.

Thay đổi giữa biểu định kiểu ưa thích và thay thế với javascript

Chúng tôi thích thiết kế các bảng định dạng thay thế cho một số trang của chúng tôi. Thật không may, Mozilla / NS6 là trình duyệt duy nhất cung cấp một cơ chế tích hợp cho người sử dụng để lựa chọn chúng. May mắn thay, rất dễ dàng để thay đổi stylesheets với javascript. Tuy nhiên, hầu hết mã javascript được đề xuất tại các trang web khác nhau sử dụng phương thức document.getElementsByTagName (‘liên kết’) để bật và tắt các bảng định kiểu có tên và điều này có một thiếu sót quan trọng. Biểu định kiểu được ưa thích hoặc thay thế có thể bao gồm cả bảng định kiểu bên ngoài được liên kết và bảng định kiểu được nhúng (phần tử <style> có thuộc tính tiêu đề). Phương pháp được đề xuất chỉ hoạt động cho bảng định kiểu bên ngoài được liên kết và không phải là các bảng nhúng. Đối tượng document.styleSheets là một phần của DOM W3C và sử dụng nó để thay đổi bảng định kiểu không đáp ứng được các vấn đề của phương pháp cũ. Đây là tài liệu trong một trường hợp thử nghiệm (một lần nữa, xem các trường hợp thử nghiệm nguồn cho biết thêm chi tiết).

Đường viền và màu nền trong các phần tử được định vị trong Opera 6

Chúng tôi rất buồn khi phát hiện ra một lỗi đã xuất hiện trong Opera 6 (hoặc ít nhất là trong phiên bản Windows). Chúng tôi không có một workaround nào được nêu ra, và thực sự nó có vẻ như có thể không có một. Lỗi này dường như không có trong Opera 5.

Về cơ bản, Opera 6 dường như làm cho một mess hoàn toàn của hộp được định vị nhưng không có một chiều rộng rõ ràng. Văn bản được định vị chính xác nhưng đường viền và hình nền đầy sai chỗ. Các trường hợp thử nghiệm sau minh họa cho vấn đề. Than ôi, không có cách nào để minh họa. Vấn đề này có thể được nhìn thấy trong ảnh chụp màn hình Opera 6 trên trang giới thiệu Power of CSS.

IE / Win 5.5 và 6: Văn bản bị bẻ gãy cạnh trái của hộp

Trong khi thực hiện thiết kế đồ họa trong CSS cho Commtag của khách hàng của chúng tôi, chúng tôi đã gặp một lỗi IE kỳ lạ đã mất khá nhiều pinning xuống. Một phần tử cấp khối, chân trang của mỗi trang, dường như được định vị chính xác – đường viền và màu nền chính xác ở nơi mà chúng tôi mong đợi – nhưng văn bản của nó đã bị di chuyển dốc sang trái, bên ngoài cạnh bên trái của hộp của phần tử, Và, thực sự, bên ngoài của khung nhìn của trình duyệt. Một phiên bản đơn giản của vấn đề có thể được nhìn thấy trong ảnh chụp màn hình này.

Nó phát hiện ra rằng lỗi này là một biến thể mơ hồ về gần đây (tại thời điểm hiện tại của văn bản) phát hiện ra Magik Creeping Text lỗi, tài liệu của Big John. Trong trường hợp cụ thể này, một phần tử mức khối có văn bản bị lệch sai về phía bên trái, vượt quá hộp của nó, nếu nó được đặt trước bởi một phần tử cấp khối với một phần bên phải và phần đệm-lót rõ ràng, chính nó chứa nhiều hơn một Các yếu tố cấp khối.

Trường hợp thử nghiệm (xem mã nguồn)
Ảnh chụp màn hình: IE6 / Win; NN7 / Win.
Một workaround là để thiết lập một biên giới-dưới cùng trên các yếu tố cấp trước khối (trường hợp thử nghiệm, ảnh chụp màn hình). Thậm chí còn kỳ lạ hơn nữa, vấn đề không được kích hoạt nếu phần tử con cuối cùng của phần tử cấp độ trên là một bảng (trường hợp kiểm tra, ảnh chụp màn hình).