Sublinhado sobrescrito no IE

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

Pergunta

Serei breve porque estou com pouco tempo, então peço desculpas se não for tão detalhado quanto gostaria.

Eu tenho algum código:

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

No FF funciona como eu gostaria, o link como um todo está sublinhado.No entanto, no IE, o link é sublinhado, exceto sob o ®, onde parece um símbolo acima de um hífen e tem uma aparência bastante ridícula.

Tentei diversas sugestões que encontrei no Google, mas nenhuma delas ajudou muito a alcançar o efeito desejado.Infelizmente, adicionar uma borda na parte inferior não é uma opção.Até agora, a melhor solução é quebrar completamente o sublinhado na tag sup com CSS, o que ainda o deixa funcionando bem no FF e parecendo menos bobo no IE.

Se alguém pudesse ajudar com isso, ficaria muito grato, prefiro não passar pelo site removendo <sup> tags como me disseram que terei que fazer caso não resolva esse dilema.

ATUALIZAR:Optei pela solução sup {"text-decoration:none" }, servirá por enquanto.Existem marcas de registro em todos os lugares, então todo o site teria que ter sido atualizado, o que foi mais problemático do que valeu a pena, todos nós decidimos.Obrigado a quem respondeu.

Foi útil?

Solução

o <sup> A tag não é ótima para coisas como marca registrada e símbolos reg.

Eu prefiro fazer isso com CSS:

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

Se você pode configurar uma classe .reg:

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

Por:

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

Outras dicas

Às vezes, você não tem permissão para adicionar classe a um link ou embrulhá -la com qualquer elemento. A situação não é tão rara quando você precisa trabalhar com código de terceiros. BTW, o mesmo problema com o elemento também.

Nesse caso, você pode usar algo assim:

  1. Deixe sublinhado como é para o Firefox (tudo parece ok)

  2. Use esse estilo para o Chrome (tem os mesmos problemas como o IE, ainda mais difícil):

    [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]
    • Desculpe por [] em tags, ainda não posso destacar como esse sistema f *** faz amostras de código - quando tento formatar como quiser, fico bagunçado.

Bem, não é uma solução elegante, basicamente use uma borda em vez de um sublinhado. Você teria que codificar a cor com base em "ativo, vistado, etc"

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

Eric

Eu fiz funcionar assim 

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

A solução de Eric é a mais próxima.Ele não precisa ter display: inline desde <a> elementos são elementos embutidos.a única coisa que lhe falta é o line-height para que você possa ver a borda inferior no IE 6 e no IE 7.Caso contrário, você não verá a linha.

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

Bem, eu concordo que parece horrível, mas parece ser exatamente a maneira como o IE combina sublinhado e substituto. Eu sugiro que você vá com seu plano CSS para remover o sublinhado para a sup Se você não pode trapacear com uma fronteira. Existe uma propriedade do IE chamada text-underline-position Mas não tem nenhum valor que ajude aqui ou tenho medo.

Para o benefício de quem ainda não sabe que seria:

a sup{text-decoration:none;}

Como diz Diodeus, e uma pequena pesquisa tende a concordar, entendo que a marca Reg não iria em um elemento SUP de qualquer maneira.

Então, assumindo que estamos apenas abordando a questão do SUP/sublinhamento e esquecendo que estamos nos referindo ao Reg Mark, as únicas soluções que conheço para fazê -las 'parecer' as mesmas são fazer vertical-align: baseline ou matar o text-decoration no sup.

A solução de fundo de borda colocará a linha em qualquer "P" "q" ou "y", em vez de através das pernas inferiores das letras. Isso é 2px menor que um sublinhado seria.

Uma alternativa é fazer a u003Ca>posição: relativau003C/a>
Faça a u003Csup>posição: absoluto; topo: -3px; Decoração de texto: Nenhum;u003C/sup>

Adicione um extra depois

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top