SUPERSCRIPT가 밑줄을 밑줄

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

문제

시간이 짧아서 간단 할 것입니다. 그래서 이것이 원하는만큼 자세히 설명하지 않으면 사과드립니다.

코드가 있습니다.

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

FF에서 이것은 내가 원하는 것처럼 작동합니다. 전체 링크가 밑줄이 그어져 있습니다. 그러나 즉, 링크는 하이픈 위의 기호처럼 보이고 다소 말도 안되는 모습을 제외하고 링크가 밑줄이 그어져 있습니다.

Google에서 찾은 몇 가지 제안을 시도했지만 원하는 효과를 달성하는 데 도움이되지 않습니다. 바닥에 테두리를 추가하는 것은 불행히도 옵션이 아닙니다. 지금까지 가장 좋은 해결책은 CSS와 함께 SUP 태그에서 밑줄을 완전히 깨는 것입니다. CSS는 여전히 FF에서 잘 작동하지만 IE에서는 덜 어리석은 것처럼 보입니다.

누구든지 이것에 도움을 줄 수 있다면 가장 감사 할 것입니다. <sup> 내가이 딜레마를 해결하지 않으면해야 할 말을 들었을 때 태그.

업데이트 : SUP { "Text-Decoration : None"} 솔루션과 함께 진행되었습니다. 어디에나 등록 마크가 있으므로 전체 사이트가 업데이트되었을 것입니다. 이는 우리 모두가 결정한 가치보다 더 어려웠습니다. 대답 한 분들께 감사드립니다.

도움이 되었습니까?

해결책

그만큼 <sup> 태그는 상표 및 Reg 기호와 같은 것들에 적합하지 않습니다.

CSS로 수행하는 것을 선호합니다.

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

.reg 클래스를 설정할 수있는 경우 :

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

을 위한:

<span class='reg'>&reg;</span>

다른 팁

때로는 링크에 클래스를 추가하거나 요소로 랩핑 할 수 없습니다. 타사 코드로 작업해야 할 때 상황은 그리 드물지 않습니다. BTW, 요소와 같은 문제도 있습니다.

이 경우 다음과 같은 것을 사용할 수 있습니다.

  1. Firefox와 마찬가지로 밑줄을 남기십시오 (모두 괜찮아 보입니다)

  2. Chrome에 이러한 스타일을 사용합니다 (IE와 같은 문제가 있어도 더 어려워).

    [style]
a sup {
    text-decoration: none;
    display: inline-block; // without this previous property will not work
    border-bottom: 1px solid;
    line-height: 1.5em;    // this and following properties are used to shift
    margin-top: -1em;      // an element to make border aligned with underline
                       // can be used relative position or something else.
}
a sub {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid;
    line-height: 0.7em;
}
[/style]
[a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
    • 태그로 미안하지만,이 f *** 시스템이 코드 샘플을 만드는 방법에 대해서는 여전히 결정을 내릴 수 없습니다. 원하는대로 포맷하려고 할 때 엉망이됩니다.

우아한 솔루션이 아니며 기본적으로 밑줄 대신 테두리를 사용합니다. "Active, Visted 등"을 기반으로 색상을 코딩해야합니다.

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

에릭

나는 그것을 이렇게 작동시켰다 

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

에릭의 솔루션이 가장 가깝습니다. 그는 가질 필요가 없습니다 display: inline ~부터 <a> 요소는 인라인 요소입니다. 그가 놓친 유일한 것은입니다 line-height IE 6과 IE 7의 테두리 바닥을 볼 수 있도록 라인을 볼 수 없습니다.

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

글쎄, 나는 그것이 끔찍해 보인다는 데 동의하지만, IE가 밑줄과 슈퍼 스크립트를 결합한 방식 인 것 같습니다. 밑줄을 제거하기 위해 CSS 계획을 세우는 것이 좋습니다. a sup 국경으로 속일 수 없다면. IE 만 호출하는 재산 만 있습니다 text-underline-position 그러나 여기서 두려워하는 데 도움이되는 가치는 없습니다.

아직 모르는 사람은 다음과 같습니다.

a sup{text-decoration:none;}

Diodeus가 말했듯이, 약간의 연구가 동의하는 경향이있는 것처럼, 나는 REG Mark가 어쨌든 SUP 요소에 들어 가지 않을 것이라는 것을 이해합니다.

따라서 우리가 SUP/Underlin vertical-align: baseline 또는 죽인 text-decoration Sup.

테두리 바닥 솔루션은 문자의 바닥 다리가 아닌 "P" "Q"또는 "Y"아래에 선을 배치합니다. 그것은 밑줄보다 2px 낮습니다.

대안은 u003Ca>위치를 만드는 것입니다 : 상대u003C/a>
u003Csup>위치를 만듭니다 : 절대; 상단 : -3px; 텍스트 결정 : 없음;u003C/sup>

추가 후에 추가하십시오

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