Thẻ <sup /> HTML ảnh hưởng đến chiều cao của dòng, làm thế nào để làm cho nó phù hợp?

Nếu tôi có một <sup>thẻ trong thẻ nhiều dòng <p>, dòng có siêu ký tự trên đó có khoảng cách dòng lớn hơn nó so với các dòng khác, bất kể chiều cao của dòng tôi đặt trên là gì <p>.

Chỉnh sửa để làm rõ : Tôi không có nghĩa là tôi có rất nhiều <p>s, mỗi cái nằm trên một dòng. Tôi có một <p>nội dung có đủ nội dung trong đó để tạo ra nhiều dòng. Ở đâu đó (bất cứ nơi nào) trong văn bản có thể có một <sup>hoặc <sub>. Điều này ảnh hưởng đến chiều cao của dòng đó bằng cách thêm khoảng cách bổ sung ở trên / dưới. Nếu tôi đặt chiều cao dòng lớn hơn, <p>điều này sẽ không có vấn đề gì. Chiều cao dòng được tăng lên, nhưng khoảng cách thêm vẫn còn.

Làm thế nào tôi có thể làm cho nó phù hợp - tức là tất cả các dòng có cùng khoảng cách cho dù chúng có chứa một <sup>hay không?

Các giải pháp của bạn phải là trình duyệt chéo (IE 6+, FF, safari, opera, chrome)

chiều cao dòng có thể sửa nó, nhưng bạn có thể phải làm cho nó khá lớn: trên các khu định cư của tôi, tôi phải tăng chiều cao của dòng lên khoảng 1,8 trước khi <sup>không còn can thiệp vào nó, nhưng điều này sẽ thay đổi từ phông chữ sang phông chữ.

Một cách tiếp cận khả thi để có được độ cao của dòng nhất quán là đặt kiểu dáng siêu ký tự của riêng bạn thay vì mặc định vertical-align: super. Nếu bạn sử dụng, topnó sẽ không thêm bất cứ thứ gì vào hộp dòng, nhưng bạn có thể phải giảm kích thước phông chữ hơn nữa để làm cho phù hợp:

sup { vertical-align: top; font-size: 0.6em; }

Một cách hack khác bạn có thể thử là sử dụng định vị để di chuyển nó lên một chút mà không ảnh hưởng đến hộp dòng:

sup { vertical-align: top; position: relative; top: -0.5em; }

Tất nhiên, điều này có nguy cơ đâm vào dòng trên nếu bạn không có đủ chiều cao dòng.

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

Mẹo nhỏ là đặt <sup>chiều cao của dòng thành 0. @Scott nói là sử dụng bình thường, nhưng điều này không phải lúc nào cũng hoạt động.

Điều này có nghĩa là bạn không phải thay đổi chiều cao của văn bản xung quanh để phù hợp với văn bản siêu ký tự. Tôi đã thử nghiệm điều này trong IE7 + và các trình duyệt chính khác.

Tôi đã có cùng một vấn đề và không có câu trả lời nào được đưa ra. Nhưng tôi đã tìm thấy một cam kết git với một bản sửa lỗi có hiệu quả với tôi:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

giữ cho nó dễ dàng:

sup { vertical-align: text-top; }

[ cỡ chữ tùy thuộc vào khuôn mặt kiểu cá nhân của bạn]

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Tôi thích sử dụng lengthtrên căn chỉnh dọc. Điều này căn chỉnh đường cơ sở của phần tử ở độ dài cho trước trên đường cơ sở của phần tử mẹ.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Lý do tại sao <sup>thẻ ảnh hưởng đến khoảng cách giữa hai dòng phải liên quan đến một số yếu tố. Các yếu tố là: chiều cao dòng, kích thước của siêu ký tự liên quan đến phông chữ thông thường, chiều cao dòng của siêu ký tự và cuối cùng nhưng không kém phần dưới cùng của siêu ký tự thẳng hàng với ... Nếu bạn đặt ... chiều cao dòng văn bản thông thường nằm trong "dải đường hầm" (đó là những gì tôi gọi là) 135% sau đó văn bản thông thường (100%) được đệm trắng thêm 35% màu trắng. Đối với một đoạn này trông như thế này:

 p
    {
            line-height: 135%;
    }

Nếu sau đó bạn không đệm trắng siêu ký tự ... (nghĩa là giữ chiều cao dòng của nó bằng 0) thì siêu ký tự chỉ có chiều rộng của văn bản của chính nó ... nếu sau đó bạn yêu cầu siêu ký tự là một tỷ lệ phần trăm của phông chữ thông thường (đối với ví dụ 70%) và bạn căn chỉnh nó ở giữa văn bản thông thường (văn bản ở giữa), bạn có thể loại bỏ vấn đề và nhận được một siêu ký tự trông giống như một siêu ký tự. Đây là:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Tôi thích giải pháp được đề xuất ở đây , như được minh họa bởi jsfiddle này :

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

Cái hay của giải pháp này là bạn có thể điều chỉnh vị trí thẳng đứng của siêu ký tự và chỉ mục, để tránh mọi xung đột với dòng trên hoặc dưới ... ở trên, chỉ cần tăng hoặc giảm 0.2emcho phù hợp với yêu cầu của bạn.

Để làm cho tất cả các dòng cao hơn , trông giống như dòng với siêu ký tự, hãy xác định một dòng lớn hơn line-heightcho toàn bộ đoạn

<p style='line-height:150%'>

hoặc bất cứ giá trị nào mang lại hiệu quả mà bạn mong muốn.

Nó có thể trông lạ, nhưng đó là cách bạn mô tả các yêu cầu của bạn.

EDIT: Để làm cho tất cả các dòng trông giống nhau khi chỉ một người cần nhiều không gian dọc hơn các dòng khác , TẤT CẢ các dòng trong đoạn sẽ phải cao hơn.

Điều này, như tôi đã nói, có thể không phải là một giải pháp hấp dẫn. Có lẽ một cái gì đó có thể được thực hiện với một nhịp làm cho văn bản chỉ có phụ / siêu ký tự nhỏ hơn , ngoài ra tôi không tin những gì bạn muốn có thể đạt được. Nhưng tôi muốn xem giải pháp của người khác.

EDIT2: Tình cờ, tôi đã thử một tệp html nhỏ chứa

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

Và các dòng có cùng chiều cao trong FF3.0,14 và Konqueror (tôi không thể nói cho các trình duyệt khác)

Tôi đã sử dụng chiều cao dòng: bình thường cho siêu ký tự, hoạt động tốt với tôi trong Safari, Chrome và Firefox, nhưng tôi không chắc chắn về IE.

Đặc biệt sử dụng điều này trên bản tin -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Tôi thích giải pháp của Milingu Kilu nhưng với tinh thần tương tự, tôi thích

sup { vertical-align:top; line-height:100%; }

& sup1, & sup2, v.v. có thể thực hiện thủ thuật. đó là một mẹo HTML để siêu ký tự

Trả lời từ đây , hoạt động trong cả ph Phantomjs và HTML được nhúng trong email:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>