Xung đột giữa chiều cao dòng và chiều cao thực tế khi In nghiêng được sử dụng

Question

Tôi có vấn đề sau:

Tôi có phần tử span với chiều cao dòng 18px và kích thước phông chữ 16px. Điều này làm việc tuyệt vời khi văn bản bên trong không phải là chữ nghiêng; khoảng thời gian vẫn cao 18 pixel.

Sự cố phát sinh khi văn bản trong phạm vi được in nghiêng hoặc in đậm. Đối với một số lý do, chiều cao của phần tử span thêm một pixel và tôi nhận được khoảng cao 19 pixel.

Sự cố này chỉ có trên firefox. IE, Safari, Opera và Chrome không gặp sự cố này. Khoảng thời gian vẫn cao 18 pixel bất kể cái gì.

có ai có vấn đề này trước đây không?

Đây là mã vi phạm:

span 
{ 
    font-size : 18px ; 
    line-height : 18px ; 
} 

span.italicSpan 
{ 
    font-style : italic; 
} 

Có một ví dụ ở đây:

http://edincanada.co.cc/test/shjs-0.6/test7.html

Vui lòng kiểm tra các trình duyệt khác nếu bạn muốn. Bạn sẽ nhận thấy các phần tử span được giữ cao 18 pixel, vì chúng phải được giữ theo chiều cao dòng: 18px

Answer 1

Bạn không thể điều chỉnh chiều cao dòng của phần tử nội tuyến. Bạn cần phao nổi hoặc đặt nó thành display: block hoặc display: inline-block.

Answer 2

Theo như tôi có thể (xem trang ví dụ trên Firefox 8 có cài đặt Firebug), sự cố cũng tồn tại đối với phần tử div đầu tiên.

Lý do là, theo mặc định, phần tử div thừa hưởng chiều cao dòng từ cha mẹ, điều này xảy ra có giá trị 19px (điều này phụ thuộc vào phông chữ và trên trình duyệt). Đặt chiều cao dòng trên phần tử bên trong chỉ ngụ ý giới hạn dưới trên chiều cao dòng thực tế. Do đó, giải pháp là đặt chiều cao dòng trên phần tử mức khối bao quanh (hoặc để biến phần tử span thành phần tử khối hiển thị, như được đề xuất trong phần tử khác).

Answer 3

Tôi cũng đã gặp vấn đề này. Tôi nghĩ rằng nó liên quan đến một số phông chữ (tôi đã có nó xảy ra với Sorts Mill Goudy, ví dụ) và làm thế nào chữ in nghiêng của họ có kích thước tương đối so với chữ cái La Mã của họ. Chiều cao của một dòng phụ thuộc vào "content box" của các yếu tố nội tuyến trong đó, và nghiêng lớn hơn có thể gây rối với chiều cao tính toán của dòng.

Giải pháp đáng tin cậy duy nhất tôi đã tìm thấy (ngoài việc sử dụng phông chữ khác) là phát với thuộc tính vertical-align của chữ nghiêng. Khi văn bản nội dung được căn chỉnh theo số baseline, tôi đã tìm thấy căn chỉnh theo chiều dọc các chữ nghiêng cho số top hoặc bottom của dòng sắp xếp mọi thứ.

Tất nhiên, bây giờ chữ nghiêng của bạn được căn chỉnh không đúng với văn bản nội dung! Cuối cùng, tùy thuộc vào việc bạn có giúp hay không.