Подчеркивание надстрочного текста в IE

Тег <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>

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

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

a sup{text-decoration:none;}

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

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

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

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

Эрик

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

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

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

Решение с нижним краем поместит линию под любыми буквами «p», «q» или «y», а не через нижние ножки букв. Это на 2 пикселя ниже, чем было бы подчеркивание.

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

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

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

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

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]
   

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