DOCTYPE ảnh hưởng đến việc hiển thị chiều cao dòng

Question

Đây là một đầu trầy xước.

Tôi đã tạo một nhận xét jsFiddle để chứng minh hiện tượng mà tôi gặp phải gần đây trong khi sử dụng khung công tác Bootstrap của Twitter để tạo một số nút thả xuống.

http://jsfiddle.net/jackwanders/WKvPv/

Về cơ bản, khi sử dụng một HTML5, HTML 4 nghiêm ngặt hoặc XHTML DOCTYPE nghiêm ngặt, nút ám như thiết kế. Tuy nhiên, khi sử dụng HTML4 hoặc XHTML Chuyển tiếp DOCTYPE, nút dấu mũ hiển thị với chiều cao ngắn hơn. Dưới đây là CSS liên quan từ Bootstrap cho <span class="caret"> (i đã gỡ bỏ phong cách mà không thành vấn đề, giống như màu sắc và gradient):

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    vertical-align: top; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

.btn .caret { 
    margin-top: 7px; 
    margin-left: 0; 
} 

.btn { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    line-height: 18px; 
    *line-height: 20px; 
    text-align: center; 
    vertical-align: middle; 
} 

Tại sao DOCTYPE ảnh hưởng đến chiều cao của nút? Nếu line-height được đặt thành 18px, tại sao chiều cao sẽ nhỏ hơn 18px?

PS - Vâng, tôi biết rằng Bootstrap đòi hỏi HTML5, nhưng tôi muốn tưởng tượng đó là đối với HTML5 tính năng sử dụng, không phải như thế nào DOCTYPE làm cho phong cách CSS

Answer 1

Trong khi viết câu hỏi này và Bản demo jsFiddle liên quan, tôi đã làm một số việc đào bới và phát hiện ra những gì đang xảy ra. Thay vì vứt bỏ câu hỏi, tôi nghĩ rằng tôi cũng có thể đăng nó với câu trả lời này.

Những gì tôi đã thu thập được từ việc kiểm tra các yếu tố trong Chrome sau khi chuyển doctypes là thế này:

• .btn không có chiều cao quy định, chỉ line-height: 18px và padding: 4px 10px
• trong HTML5, chiều cao cuối cùng của caret- nút duy nhất là 18px, giống như được xác định line-height
• trong DOCTYPE chuyển tiếp, chiều cao của nút chỉ dấu mũ là 11px, giống như outerHeight() của caret (border-top + margin-top), nhưng nhỏ hơn line-height của nút.

Vì vậy, tôi chỉ có thể giả định rằng nghiêm ngặt (và HTML5) doctypes thực thi line-height như một số loại min-height; ngay cả khi không có văn bản trong phần tử, nó áp dụng line-height ... trong khi DOCTYPES chuyển tiếp thì không.

Khi tôi thêm một số văn bản vào nút chỉ dấu mũ (ví dụ:  ), sau đó line-height đá vào DOCTYPE chuyển tiếp và nút hiển thị ở độ cao đầy đủ.