HTML <sup /> 태그에 영향을 미치는 라인을 높이는 방법,그것을 일관하는가?

StackOverflow https://stackoverflow.com/questions/1530685

문제

이 있는 경우 <sup> 태그에 여러 줄의 <p> 태그인 위 첨자는 그것에 더 큰 줄 간격은 위의 그것보다는 다른 라인,관계 없이 무엇 line-height 에 <p>.

편집을 위해 설명:내가 의미하지 않는 나는 많이 <p>s,각각에 있는 하나의 라인입니다.단일 <p> 충분한 콘텐츠에 그것을 일으킬 포장 위에 여러 줄이 있습니다.어딘가(어디서나)에 있는 텍스트가있을 수 있습 <sup> 나 <sub>.이에 영향을 줄 높이는 라인에 추가하여 여분의 간격을 위/아래.는 경우가 더 큰 line-height 에 <p> 이 차이를 만들지 않습니다 문제입니다.라인-높이가 증가하지만,추가 공백이 있는 여전히 남아 있습니다.

어떻게 만들 수 있습니 그것을 일관-즉모든 라인이 같은 간격지 여부를 포함하고 있기 때 <sup> 는지?

귀하의 솔루션을 해야 합 크로스 브라우저(IE6+,FF,safari,opera,chrome)

도움이 되었습니까?

해결책

라인-높이가 그것을 해결,하지만 해야 할 수도 있습니다 그것은 꽤 큰:내 visual c#express 사용을 증가 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; }

물론 이것은 충돌의 위험으로 위의 라인 당신이 충분하지 않 line-height.

다른 팁

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

트릭을 설정하는 것입니다 <sup>'s line-height 은 0 입니다.@스콧 말을 사용하여 정상적인,하지만 이 모든 상황을 해결할 수는 없습니다.

이것은 당신 을 변경할 필요가 없 line-height 주변의 텍스트를 수용하기 위 첨자 텍스트입니다.내가 테스트에서 이 IE7+와 다른 주요 브라우저입니다.

나는 같은 문제의 주어진 답했다.하지만 내가 발견 git commit 과 함께 수정하는 작업에 대한 저:

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

유지 쉽습니다:

sup { vertical-align: text-top; }

[font-size 에 따라 개인형 얼굴]

내가 사용하는 것을 선호하 length 에 수직 정렬한다.이 정렬 기준의 요소에 지정된 길이 위의 기준은 그 부모입니다.

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

는 이유 <sup> 태그에 영향을 미치 사이의 간격은 두 줄을 함께 할 수 있는 숫자의 요소입니다.는 요인은 다음과 같습니다.라인,높이의 크기 위 첨자와 관련하여 일반 글꼴인의 높이를 위 첨자 그리고 마지막으로 무엇입의 하단에 위 첨자 맞추...설정하는 경우...선 높이의 일반 텍스트에서"터널 밴드"(나는 그것)135%다음 일반 텍스트(100%)가 화이트 패딩 35%의 흰색이다.단락이 다음과 같습니다:

 p
    {
            line-height: 135%;
    }

는 경우 다음을 수행지 않는 화이트 패드를 위 첨자...(i.e유지 라인의 높이가 0 으)는 첨자는 폭의 그것의 자신의 텍스트를...는 경우 다음을 요청 위 첨자 수정 비율의 일반 글꼴(예를 들어 70%)고 당신은 그것을 정렬과 중동의 일반 텍스트(text-중동),제거할 수 있습니다 문제를 해결하고 위 첨자처럼 보이는 위 첨자.그것은 여기: 

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

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

모든선 크, 을보고,같은 라인으로 위첨자,정의 크 line-height 전체 단락

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

또한 값을 효과를 제공합니다.

그것은 이상하게 보일 수 있습,그러나 그 방법을 설명하는 귀하의 요구 사항입니다.

편집:을 만들기 위해 모든 라인에 동일하게 보 할 때만 하나 더 많은 수직보다 공간을 다른 사람, 의 모든 라인에서 항해야 할 것이 키가 있습니다.

이로 말하지 않을 수 있습니다,매력적인 솔루션입니다.어쩌면 무언가를 할 수 있는 범위를 만들기 텍스트와 함께 하위/위 첨자 작, 객실 내부는 믿지 않는 당신이 원하는 무엇을 달성할 수 있습니다.그러나 나보고 싶은 다른 사람의 솔루션입니다.

EDIT2:또한,시도했는 작은 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.14Cvm(말할 수 없이 다른 브라우저)

사용 했습니다 line-height:정상에 대한 위 첨자는 위해 Safari,Chrome,Firefox,그러나 나에 대한 확실하지 않다.

특별히 사용에서 뉴스레터

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

나는 다음과 같 Milingu Kilu 의 솔루션이지만 같은 정신세요

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

1,2 등입니다.트릭을 할 수 있습니다.그것은 HTML 트릭을 위 첨자

답터 기,모두에서 작동합 phantomjs 및 이메일을 포함 HTML:

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top