Hộp ẩn danh nội tuyến?

Question

Tôi có câu hỏi về nội dung này sitepoint link

đánh dấu Dưới đây là trả lại như khối + inline + chặn

<p>In 1912, <em>Titanic</em> sank on her maiden voyage.</p> 

Chrome:

In 1912, - display: block 
<em>Titanic</em> - display:inline 
sank on her maiden voyage. - display:block 

Sitepoint liên kết nói 2 hộp giấu tên (1 và 3) nên nội tuyến để giữ tất cả các hộp giống nhau bên trong p. Nhưng chrome hiển thị các hộp bên trong p dưới dạng kết hợp của khối và nội dòng.

Theo CSS3 box model

hộp khối cấp có thể chứa các hộp một trong hai dòng hoặc hộp khối cấp, nhưng không phải cả hai. Nếu cần thiết, bất kỳ hộp dòng nào thuộc về phần tử của ô này được bao bọc trong một hoặc nhiều hộp ẩn danh (càng ít càng tốt) với ‘hiển thị’ của ‘chặn’.

Theo nội dung đề xuất nội dung đề xuất W3C có vẻ chính xác nhưng tôi nhận được kết hợp các hộp bên trong hộp cấp khối (p) trên chrome.

Một lần nữa, một điểm đề xuất cho biết các hộp ẩn danh sẽ chỉ chặn các mâu thuẫn với tài liệu của vị trí.

Theo CSS3 box model

Lưu ý rằng các hộp vô danh quy định tại module này là tất cả các khối cấp, nhưng hộp vô danh quy định tại các module khác có thể khác nhau.

Câu hỏi của tôi là:

1) tất cả 3 hộp nên được inline (Browser làm cho khối + inline + khối)

2) là inline hộp nặc danh đề cập trong tiêu chuẩn W3C?

Answer 1

Mục 9.2.2.1 trong Visual Formatting Model thực sự có ví dụ gần như giống hệt với bạn, ví dụ:

Bất kỳ văn bản nào được chứa trực tiếp trong phần tử vùng chứa khối (không phải bên trong phần tử nội tuyến) phải được coi là phần tử nội tuyến ẩn danh.

Trong một tài liệu với HTML đánh dấu như thế này:

<p>Some <em>emphasized</em> text</p> 

các <p> tạo ra một hộp khối, với một số hộp inline bên trong nó. Hộp "nhấn mạnh" là một hộp nội tuyến được tạo bởi phần tử nội tuyến (<em>), nhưng các hộp khác ("Một số" và "văn bản") là các hộp nội tuyến được tạo bởi phần tử cấp khối (<p>). Cái sau được gọi là các hộp nội tuyến ẩn danh, bởi vì chúng không có phần tử mức nội tuyến liên quan.

Những gì bạn nhìn thấy trong công cụ dành cho nhà phát triển của Chrome là giá trị hiển thị cho phần tử mà các hộp ẩn danh tồn tại, chứ không phải chính các hộp nội tuyến.Tất cả chúng đều là hộp nội tuyến, nhưng "In 1912" & "sank on her maiden voyage" sẽ ẩn danh trong khi phần tử <em> sẽ tạo hộp nội tuyến không ẩn danh vì nó là phần tử cấp nội tuyến.

Answer 2

Văn bản trước và sau phần tử em được gói trong các hộp nội tuyến ẩn danh.

Nếu bạn thấy trong số này fiddle, tất cả văn bản được hiển thị nội dòng trên một dòng. Em là một yếu tố nội tuyến, "Năm 1912," được bọc trong một hộp vô danh nội tuyến, như là "chìm trên chuyến đi đầu tiên của cô."

Trình gỡ lỗi sẽ nói thành phần p là display: block. Trình gỡ lỗi không hiển thị hộp ẩn danh, do đó bạn sẽ không thấy văn bản đó trước và sau em thực sự là nội tuyến. Bạn có thể thấy nó mặc dù, như thể chúng là display: block chúng sẽ là chiều rộng của phần tử và đẩy em lên một dòng mới.

Anonymous hộp inline được đề cập trong spec ở đây: http://www.w3.org/TR/CSS2/visuren.html#anonymous