2013-03-09 34 views
19

Tôi có phần mở rộng WebDeveloper và tôi nhận được cảnh báo CSS vì vậy tôi đã đi điều tra. Cảnh báo là 3 trong số các trường hợp sau:jQuery gây ra cảnh báo kích thước hộp Firefox

Warning: Unknown property 'box-sizing'. Declaration dropped. 
Line: 0 

Sau đó, tôi tạo một tệp trống và nhận thấy nó không có ở đó. Một vài phút sau, tôi đã tìm thấy nguyên nhân có thể tái sản xuất: bao gồm cả tập lệnh jQuery 1.9.1!

Tôi có thể làm gì hoặc nên làm gì? Tôi muốn sử dụng jquery nhưng tôi thấy nó một chút khó chịu rằng tôi sẽ mãi mãi nhìn thấy cảnh báo CSS trong thanh công cụ của tôi.

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<div>Empty</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</body> 
</html> 
+7

Cảnh báo CSS của Firefox rất ồn. Trong nhiều trường hợp không thể thực hiện tính năng trình duyệt chéo mà không có một số tính năng xuất hiện (ví dụ: bất kỳ thuộc tính tiền tố hoặc bộ lọc IE nào của nhà cung cấp hoặc các thuộc tính chính thức mà nó chưa nhận ra). Vì vậy, làm việc xung quanh họ không chỉ là không cần thiết, nó thực sự gây bất lợi cho trang web của bạn (tối thiểu thêm điều kiện không cần thiết cho các tệp của bạn) – Dave

+0

Ngoại trừ bỏ qua chúng làm cách nào để loại bỏ chúng khỏi bảng điều khiển lỗi? –

Trả lời

22

Tùy chọn

  1. Sử dụng jQuery 1.7.2.
  2. Tăng vấn đề với nhóm jQuery và hy vọng khắc phục (hoặc tự cung cấp).
  3. Sử dụng Firebug thay vì WebDeveloper (có thể hoặc không thể trợ giúp).
  4. Bỏ qua nó.

Miễn là trang hiển thị chính xác, tôi cho rằng đây là cảnh báo bạn có thể bỏ qua ngay cả khi bạn đang xây dựng trang web yêu cầu nghiêm ngặt việc xác thực CSS.

Những cảnh báo sẽ biến mất ngay sau khi Firefox đã hỗ trợ đầy đủ cho box-sizing (mà không đòi hỏi tiền tố -moz-), nhưng điều đó sẽ không xảy ra cho đến khi một số phiên bản sau khi Firefox 21.

thông tin nền

Cảnh báo phát sinh từ các cú pháp khác nhau cần thiết cho một số kiểu CSS nhất định. Để hỗ trợ tất cả các trình duyệt, bạn thường phải chỉ định tất cả các cú pháp khác nhau. Trình duyệt sẽ bỏ qua những người mà họ không nhận ra.

Trong trường hợp của box-sizing, Firefox yêu cầu -moz- tiền tố, phiên bản đầu tiên của trình duyệt Safari di động và trình duyệt Android đòi hỏi tiền tố -webkit-, và các trình duyệt khác không cần tiền tố ở tất cả:

-webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
     box-sizing: content-box; 

Một vấn đề tương tự phát sinh khi thêm một dốc tuyến tính, trong trường hợp này do giá trị thay vì tên thuộc tính:

background-image: -webkit-linear-gradient(top, #444, #999); 
background-image: -moz-linear-gradient(top, #444, #999); 
background-image:  -ms-linear-gradient(top, #444, #999); 
background-image:  -o-linear-gradient(top, #444, #999); 
background-image:   linear-gradient(top, #444, #999); 

Khi cảnh báo phát sinh từ các cú pháp khác nhau được sử dụng, nó thường là một cas e của trình duyệt tính hợp lệ hoặc bảng điều khiển lỗi không đủ thông minh để nhận ra một vấn đề thực sự từ một sự vô hại mà thường không thể tránh khỏi. Và để công bằng, đó là trong thực tế được xác định là một cảnh báo, không phải là một lỗi.

thông tin bổ sung

các phiên bản mới hơn của jQuery tận dụng các box-sizing phong cách cho các mục đích nội bộ. jQuery 1.8.0 chỉ tạo ra một cảnh báo box-sizing duy nhất và jQuery 1.7.2 không tạo ra cảnh báo nào.

jQuery có thể đang sử dụng nó theo cách hơi bất cẩn - trước tiên không thử nghiệm nếu có một số loại hỗ trợ cho nó - nhưng không thực hiện bất kỳ tác hại thực sự nào.Nếu vậy, nếu đủ người phàn nàn về nó với nhóm jQuery, mã jQuery có thể được tái cấu trúc để giải quyết vấn đề này (với chi phí của jQuery chạy chậm hơn một chút).

Nếu cảnh báo là khoảng -moz-box-sizing thay vì box-sizing, nhiều khả năng sẽ đề xuất lỗi có thể xảy ra với Firefox hơn là một vấn đề nhỏ với jQuery.

+0

chúng tôi chỉ đơn giản là bỏ qua thông báo.Được làm cho tôi. –

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