แท็ก HTML <sup /> มีผลต่อความสูงของบรรทัดจะทำให้สอดคล้องกันได้อย่างไร

หากฉันมี<sup>แท็กในแท็กแบบหลายบรรทัด<p>บรรทัดที่มีตัวยกจะมีระยะห่างระหว่างบรรทัดใหญ่กว่าบรรทัดอื่น ๆ โดยไม่คำนึงถึงความสูงของบรรทัดที่ฉันวางไว้บน<p>.

แก้ไขเพื่อความกระจ่าง : ฉันไม่ได้หมายความว่าฉันมีจำนวนมาก<p>ซึ่งแต่ละอันอยู่ในบรรทัดเดียว ฉันมี<p>เนื้อหาเดียวที่มีเนื้อหาเพียงพอที่จะทำให้เกิดการตัดเป็นหลายบรรทัด บางแห่ง (ที่ใดก็ได้) ในข้อความอาจมี<sup>หรือ<sub>. สิ่งนี้มีผลต่อความสูงของบรรทัดสำหรับบรรทัดนั้นโดยการเพิ่มระยะห่างด้านบน / ด้านล่าง หากฉันตั้งค่าความสูงของเส้นที่ใหญ่กว่า<p>นี้จะไม่ทำให้เกิดความแตกต่างกับปัญหา ความสูงของเส้นจะเพิ่มขึ้น แต่ระยะห่างที่เพิ่มขึ้นยังคงอยู่

ฉันจะทำให้มันสอดคล้องกันได้อย่างไร - คือทุกบรรทัดมีระยะห่างเท่ากันไม่ว่าจะมี a <sup>หรือไม่?

โซลูชันของคุณต้องเป็นแบบข้ามเบราว์เซอร์ (IE 6+, FF, safari, opera, chrome)

line-height แก้ไขได้ แต่คุณอาจต้องทำให้ใหญ่พอสมควร: ในการตั้งค่าของฉันฉันต้องเพิ่ม line-height เป็นประมาณ 1.8 ก่อนที่จะ<sup>ไม่รบกวนมันอีกต่อไป แต่สิ่งนี้จะแตกต่างกันไปในแต่ละฟอนต์

vertical-align: superวิธีการหนึ่งที่เป็นไปได้สูงที่จะได้รับสายที่สอดคล้องกันคือการตั้งค่าตัวยกของคุณเองจัดแต่งทรงผมแทนการเริ่มต้น หากคุณใช้topมันจะไม่เพิ่มอะไรในกล่องบรรทัด แต่คุณอาจต้องลดขนาดตัวอักษรเพิ่มเติมเพื่อให้พอดี:

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

การแฮ็กอีกอย่างที่คุณสามารถลองทำได้คือใช้การวางตำแหน่งเพื่อเลื่อนขึ้นเล็กน้อยโดยไม่ส่งผลกระทบต่อกล่องบรรทัด:

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

แน่นอนว่าสิ่งนี้จะเสี่ยงต่อการพังในบรรทัดด้านบนหากคุณมีความสูงของเส้นไม่เพียงพอ

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;
}

เคล็ดลับคือตั้งค่า<sup>ความสูงของเส้นเป็น 0 @Scott บอกว่าให้ใช้ปกติ แต่ไม่ได้ผลเสมอไป

ซึ่งหมายความว่าคุณไม่จำเป็นต้องเปลี่ยนความสูงบรรทัดของข้อความโดยรอบเพื่อให้เหมาะกับข้อความตัวยก ฉันได้ทดสอบสิ่งนี้ใน IE7 + และเบราว์เซอร์หลักอื่น ๆ

ฉันมีปัญหาเดียวกันและคำตอบที่ระบุไม่ได้ผล แต่ฉันพบคอมมิตคอมมิตกับการแก้ไขที่ได้ผลสำหรับฉัน:

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

ทำให้ง่าย:

sup { vertical-align: text-top; }

[ ขนาดแบบอักษรขึ้นอยู่กับประเภทใบหน้าของคุณ]

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

ฉันชอบใช้lengthกับแนวตั้ง สิ่งนี้จะจัดแนวพื้นฐานขององค์ประกอบตามความยาวที่กำหนดเหนือเส้นฐานของพาเรนต์

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

สาเหตุที่<sup>แท็กมีผลต่อระยะห่างระหว่างสองบรรทัดเกี่ยวข้องกับปัจจัยหลายประการ ปัจจัย ได้แก่ ความสูงของเส้นขนาดของตัวยกที่สัมพันธ์กับแบบอักษรปกติความสูงของบรรทัดของตัวยกและสุดท้าย แต่ไม่ท้ายสุดคือด้านล่างของตัวยกที่สอดคล้องกับ ... หากคุณกำหนด ... ความสูงของบรรทัด ของข้อความปกติจะอยู่ใน "แถบทันเนล" (นั่นคือสิ่งที่ฉันเรียกว่า) 135% จากนั้นข้อความปกติ (100%) จะถูกบุด้วยสีขาวโดย 35% ของสีขาวมากขึ้น สำหรับย่อหน้าจะมีลักษณะดังนี้:

 p
    {
            line-height: 135%;
    }

ถ้าคุณไม่ใช้ตัวยกสีขาว ... (เช่นรักษาความสูงของบรรทัดไว้ที่ 0) ตัวยกจะมีความกว้างของข้อความของตัวเองเท่านั้น ... ถ้าคุณขอให้ตัวยกเป็นเปอร์เซ็นต์ของแบบอักษรปกติ (สำหรับ ตัวอย่าง 70%) และคุณจัดแนวตรงกลางของข้อความปกติ (text-middle) คุณจะสามารถขจัดปัญหาและรับตัวยกที่ดูเหมือนตัวยกได้ นี่คือ:

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

ฉันชอบวิธีแก้ปัญหาที่แนะนำที่นี่ดังตัวอย่างโดยjsfiddle นี้ :

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>.

ความสวยงามของโซลูชันนี้คือคุณสามารถปรับแต่งการวางตำแหน่งแนวตั้งของตัวยกและตัวห้อยเพื่อหลีกเลี่ยงการปะทะกับบรรทัดด้านบนหรือด้านล่าง ... ในด้านบนเพียงเพิ่มหรือลด0.2emเพื่อให้เหมาะกับความต้องการของคุณ

ในการทำให้บรรทัดทั้งหมดสูงขึ้นเพื่อให้มีลักษณะเหมือนกันกับบรรทัดที่มีตัวยกให้กำหนดขนาดที่ใหญ่กว่าline-heightสำหรับทั้งย่อหน้า

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

หรือค่าอะไรก็ตามที่ให้ผลตามที่คุณต้องการ

อาจดูแปลก แต่นั่นเป็นวิธีที่คุณอธิบายความต้องการของคุณ

แก้ไข: เพื่อให้เส้นทั้งหมดมีลักษณะเหมือนกันเมื่อเส้นเดียวต้องการพื้นที่แนวตั้งมากกว่าเส้นอื่น ๆทุกบรรทัดในย่อหน้าจะต้องสูงขึ้น

อย่างที่บอกไปอาจไม่ใช่วิธีแก้ปัญหาที่น่าสนใจ บางทีบางอย่างสามารถทำได้ด้วยช่วงที่ทำให้ข้อความที่มี sub / superscript เล็กลงนอกจากนั้นฉันไม่เชื่อว่าสิ่งที่คุณต้องการจะทำได้ แต่ฉันอยากเห็นวิธีแก้ปัญหาของคนอื่น

แก้ไข 2: บังเอิญฉันได้ลองใช้ไฟล์ html ขนาดเล็กที่มีไฟล์

<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>

และเส้นมีความสูงเท่ากันทั้งหมดใน FF3.0.14 และ Konqueror (ฉันไม่สามารถพูดกับเบราว์เซอร์อื่นได้)

ฉันใช้ line-height: normal สำหรับตัวยกซึ่งใช้ได้ดีสำหรับฉันใน Safari, Chrome และ Firefox แต่ฉันไม่แน่ใจเกี่ยวกับ IE

ใช้สิ่งนี้เป็นพิเศษในจดหมายข่าว -

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

ฉันชอบวิธีแก้ปัญหาของ Milingu Kilu แต่ด้วยจิตวิญญาณเดียวกันฉันชอบ

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

& sup1, & sup2 ฯลฯ อาจทำเคล็ดลับ มันเป็นเคล็ดลับ HTML ในการยกระดับ

คำตอบจากที่นี่ใช้งานได้ทั้งใน phantomjs และใน HTML ที่ฝังอีเมล:

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