Надстрочное подчеркивание в IE

Question

Я буду краток, потому что у меня мало времени, поэтому прошу прощения, если это не так подробно, как мне бы хотелось.

У меня есть кое-какой код:

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

В FF это работает так, как мне бы хотелось, ссылка в целом подчеркнута.Однако в IE ссылка подчеркнута, за исключением ®, где она выглядит как символ над дефисом и выглядит довольно нелепо.

Я попробовал несколько предложений, которые нашел в Google, но ни одно из них не очень помогает в достижении желаемого эффекта.К сожалению, добавление границы снизу - это не вариант.Пока лучшим решением является полное удаление подчеркивания в теге sup с помощью CSS, что по-прежнему позволяет ему нормально работать в FF и при этом выглядеть менее глупо в IE.

Если бы кто-нибудь мог помочь с этим, я был бы очень признателен, я бы предпочел не проходить через удаление сайта <sup> теги, как мне сказали, я должен буду сделать, если не решу эту дилемму.

Обновить:Пошел с решением sup {"text-decoration: none" }, пока сойдет.Повсюду есть регистрационные метки, так что весь сайт пришлось бы обновлять, что доставило больше хлопот, чем того стоило, как мы все решили.Спасибо тем, кто откликнулся.

Answer 1

Тот Самый <sup> тег не подходит для таких вещей, как товарный знак и регистрационные символы.

Я предпочитаю делать это с помощью 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>

Answer 2

Иногда вам не разрешается добавлять класс к ссылке или обертывать ее каким-либо элементом.Ситуация не так уж редка, когда вам нужно работать со сторонним кодом.Кстати, та же проблема и с element.

В этом случае вы можете использовать что-то вроде этого:

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]
   

   • извините за [] s в тегах, я все еще не могу понять, как эта гребаная система создает образцы кода - когда я пытаюсь отформатировать так, как она хочет, я получаю беспорядок.

Answer 3

Ну, это не элегантное решение, в основном используйте рамку вместо подчеркивания.Вам пришлось бы закодировать его цвет на основе "Активный", "Видимый" и т.д.

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

Эрик

Answer 4

Я заставил это работать так

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

Answer 5

Решение Эрика самое близкое. Ему не нужно иметь 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>

Answer 6

Ну, я согласен, это выглядит ужасно, но, похоже, именно так IE сочетает подчеркивание и верхний индекс. Я предлагаю вам использовать свой план CSS, чтобы удалить подчеркивание для a sup, если вы не можете обмануть с рамкой. Есть свойство только для IE с именем text-underline-position, но оно не имеет никакого значения, которое, как я боюсь, тоже помогает.

Для тех, кто еще не знает, это будет:

a sup{text-decoration:none;}

Answer 7

Как говорит Диодей, и небольшое исследование имеет тенденцию соглашаться, я понимаю, что знак reg в любом случае не будет входить в элемент sup.

Итак, если предположить, что мы только решаем проблему sup / underline и забываем, что имеем в виду reg mark, единственное, что я знаю, чтобы заставить их «выглядеть» одинаково, это заставить vertical-align: baseline или убить text-decoration на ужин.

Answer 8

Решение для нижнего края поместит строку под любой " p " & Quot; & Д Quot; или " y " а не через нижние ножки букв. Это на 2 пикселя ниже, чем подчеркивание.

Альтернатива - сделать < a > позиция: относительная
сделать < sup > позиция: абсолютная; верх: -3px; текст-отделка: нет;

добавить дополнительные & amp; nbsp; после < / sup >