2012-06-30 28 views
5

Hãy xem xét một kịch bản mà thuộc tính CSS thiếu đơn vị (px, em, pt,%):dự phòng cho CSS thuộc tính không có đơn vị

<body> 
    <div 
     style= "width:170; 
       border:1 dotted PaleGreen; 
       background-color:MistyRose"> 
     The quick brown 
    </div> 
</body> 

Câu hỏi:

  1. Tại sao nó sẽ dự phòng để px? Pixel luôn là đơn vị ưu tiên? Có quy tắc nào được xác định trong bản thảo hoặc đề xuất làm việc của W3C không?
  2. Có quy tắc bắt buộc UA dự phòng cho đơn vị ưu tiên không?
  3. Với ví dụ trên, mà những điều sau đây là một hành vi chính xác:
    • Internet Explorer: Trong chế độ Quirks (IE6,5,4 ..) chiều rộng và biên độ rộng sử dụng để dự phòng để px. Kể từ IE7 (cho đến nay, IE10RP) nó bỏ qua toàn bộ quy tắc nếu đơn vị bị thiếu. Do đó, cả hai quy tắc đều bị bỏ qua.
    • Firefox 13: Trong ví dụ về chiều rộng ví dụ ở trên để px, nhưng chiều rộng của đường viền bị bỏ qua.
    • Chrome 19, Opera 12, Safari 5.1.2: Cả chiều rộng và độ rộng đường viền dự phòng cho px.

Lưu ý: Trên Microsoft-Connect, họ nói:

Vấn đề bạn đang báo cáo là do thiết kế. IE10 trong chế độ tiêu chuẩn bỏ qua một chiều rộng hoặc chiều cao mà không có một đơn vị phù hợp với các tiêu chuẩn CSS. Thiết bị không phải là tùy chọn.

Trả lời

13

Tôi không thấy một tờ khai doctype trong HTML của bạn, vì vậy tôi chỉ có thể giả sử trang thử nghiệm của bạn đang được hiển thị ở chế độ quirks.

  1. Tại sao nó dự phòng thành px? Pixel luôn là đơn vị ưu tiên? Có quy tắc nào được xác định trong bản thảo hoặc đề xuất làm việc của W3C không?

    Nó sẽ chỉ quay trở lại px ở chế độ quirks (và tôi chỉ tin vào các thuộc tính nhất định). Và có, px là đơn vị dự phòng ưa thích. Điều này phản ánh lại thuộc tính HTML widthheight cũ đã chấp nhận độ dài pixel dưới dạng số không đơn vị.

  2. Có quy tắc bắt buộc UA dự phòng cho đơn vị ưu tiên không?

    Không, vì vậy hành vi không phù hợp mà bạn quan sát. Trong chế độ tiêu chuẩn, mặc dù, một UA cần phải bỏ qua các giá trị độ dài mà không có đơn vị; đơn vị không phải là tùy chọn, như đã đề cập trong Microsoft Connect mà bạn báo giá.

    In CSS2.1, tất cả các giá trị độ dài khác không phải có đơn vị.

  3. Với ví dụ trên, mà những điều sau đây là một hành vi chính xác:

    • Internet Explorer: Trong chế độ Quirks (IE6,5,4 ..) chiều rộng và biên độ rộng sử dụng để dự phòng để px. Kể từ IE7 (cho đến nay, IE10RP) nó bỏ qua toàn bộ quy tắc nếu đơn vị bị thiếu. Do đó, cả hai quy tắc đều bị bỏ qua.
    • Firefox 13: Trong ví dụ về chiều rộng ví dụ ở trên để px, nhưng chiều rộng của đường viền bị bỏ qua.
    • Chrome 19, Opera 12, Safari 5.1.2: Cả chiều rộng và độ rộng đường viền dự phòng cho px.

    Một lần nữa, dựa trên giả định rằng trang của bạn đang ở chế độ quirks, tôi chỉ có thể nói rằng trong khi các thông số kỹ thuật thực hiện một đề cập đến hành vi kỳ quặc, các chi tiết cụ thể về hành vi kỳ quặc như vậy không được định nghĩa trong thông số kỹ thuật (cho cả hai lý do rõ ràng và không rõ ràng).

    Tôi đoán Microsoft đã thay đổi hành vi quirks mode trong IE7 + để phản ánh tiêu chuẩn hành vi cho các giá trị unitless, như chế độ quirks tồn tại trong tất cả các trình duyệt (trừ IE < 6) và được kích hoạt với các loại tài liệu không đúng cách cùng hoặc thiếu của một loại tài liệu. Tuy nhiên, hành vi trong chế độ tiêu chuẩn đã không thay đổi, theo như tôi biết.

+2

Đây là câu trả lời đúng. Khi tôi sử dụng doctype của HTML5 '', tất cả các trình duyệt nói trên đều bỏ qua chiều rộng và đường viền. Tôi không bao giờ biết rằng các trình duyệt khác cũng hoạt động khác nhau trong chế độ quirks. Cảm ơn bạn! –

0
  1. "px" là đơn vị phổ biến nhất được sử dụng, vì vậy thường trình duyệt sử dụng có "lẽ thường" và sử dụng "px" vì nó là đơn vị sử dụng nhiều nhất trong thiết kế web nếu không có đơn vị được chỉ định.
  2. Không có quy tắc nào như vậy. Trình duyệt chỉ sử dụng đơn vị được sử dụng nhiều nhất trong thiết kế.
  3. Hành vi lý tưởng nên sử dụng px và di chuyển mà không bỏ qua các kiểu khác, nhưng không có quy tắc nào như vậy khi bạn thấy các trình duyệt khác nhau khác nhau, chúng thực sự đang thực hiện logic riêng để chống lại các lỗi như vậy không có quy tắc theo dõi trong các tình huống như vậy. Nó phụ thuộc vào trình duyệt trên những gì nó làm.

Bạn không bao giờ nên dựa vào trình duyệt để sửa lỗi của mình. Luôn luôn dựa vào chính mình để có được sự tương thích tốt hơn cho BROSS BROWSER

+0

Vấn đề là do thiếu loại tài liệu. –

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