jQuery/CSS: chiều cao dòng "bình thường" ==? Px

Question

Tôi đang gọi số $("#foobar").css("line-height") và nhận lại "bình thường". Làm cách nào để dịch số này thành số lượng pixel? Có phải "bình thường" được định nghĩa trong đặc tả CSS hay là trình duyệt cụ thể không?

Answer 1

Bình thường được gọi là abnormal trên several instances vì có sự thiếu nhất quán giữa các trình duyệt.

tuyên bố line-height: bình thường không chỉ thay đổi từ trình duyệt để trình duyệt, mà tôi đã dự kiến ​​trong thực tế, định lượng những khác biệt là toàn bộ điểm nhưng họ cũng thay đổi từ một phông chữ mặt đối khác, và cũng có thể thay đổi trong một khuôn mặt nhất định.

Answer 2

normal là cài đặt hợp lệ cho line-height để thực sự không có cách nào cho các trình duyệt sẽ trả về điều đó.

Hoặc, bạn có thể sử dụng .css('height'), vì nó sẽ chỉ đếm phần bên trong của phần tử, không phải đệm/đường viền/lề. Nó sẽ mất một chút sáng tạo nếu bạn có một yếu tố đa dòng, hoặc một yếu tố có nhiều hơn chỉ là văn bản trong đó.

http://jsfiddle.net/xVBfb/

Edit: Một ví dụ về một công việc xung quanh sẽ có

<span id='def' style='line-height:inherit;display:none;'>&nbsp;</span>

trong phần tử, sau đó để tìm chiều cao dòng bạn chỉ có thể sử dụng .height() của #def vì nó sẽ luôn luôn chỉ có một dòng và do đó, chiều cao dòng của phần tử gốc.

---

Chrome trong Windows XP là ví dụ về trình duyệt trả về normal trong jsfiddle đó trừ khi được chỉ định rõ ràng khác. Firefox trả về số điểm ảnh. normal là giá trị ban đầu cho mỗi thông số w3. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

Answer 3

Theo this page, có vẻ như hầu hết các trình duyệt gần đây sử dụng giá trị tương tự cho line-height: normal: 1,14, id est các font-size sở hữu với hệ số 1,14.

thử với một số trình duyệt (trên Windows XP):

• Chrome 21.0.1180.75
• Firefox 14.0.1
• Safari 5.1.7
• Opera 11,64
• IE 7
• IE 8

EDIT

tôi đã sai, line-height phụ thuộc của font-family, font-size, trình duyệt của bạn, có lẽ hệ điều hành của bạn ...

Đọc thêm trên Eric Meyers' website.

Answer 4

Tính toán chính xác chiều cao dòng bình thường trong pixel rất khó. Mặc dù, theo số MDN khoảng 1,2em.

Nếu bạn đã:

body{ 
    font-size: 16px; 
} 

Vì vậy, trang web của bạn có bình thường font-size là 16px thì line-height bình thường sẽ là khoảng 24px. Điều này có nghĩa là bạn có thể tính giá trị pixel kích thước phông chữ thông thường nhân với 1.5 là 16px * 1.5 == 24px

Lưu ý: Tôi không nhân với 1,2 vì có sự khác biệt giữa giá trị px và giá trị em.

Answer 5

Tuy nhiên điều này đã được viết từ lâu rồi nhưng đã giúp tôi viết giải pháp tạm thời trong nhiệm vụ của mình. Tôi đang sao chép mã này hơn là những người khác có thể sử dụng nó.

$('#lineHeightInc') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct++; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
}); 

$('#lineHeightDic') 
.click(function() { 
    var box = GetSelectedBox(); 
    var ct = box.data('LineHeight'); 
    if (isNaN(ct)) 
     ct = 0; 
    ct--; 
    box.css('line-height', (parseFloat(box.css('font-size')) * 1.61 + ct) + 'px'); 
    box.data('LineHeight', ct); 
});