Подчеркнутое подчеркивание в IE

Question

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

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

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

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

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

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

ОБНОВЛЕНИЕ: Пошло с решением sup {"text-украшение: нет"}, пока оно подойдет. Повсюду есть регулярные отметки, так что весь сайт пришлось бы обновить, что было больше проблем, чем стоило того, как мы все решили. Спасибо тем, кто ответил.

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

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

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

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 в тегах, я до сих пор не могу понять, как эта система f *** делает примеры кода - когда я пытаюсь отформатировать, как она хочет, я получаю беспорядок.

Answer 3

Ну, это не элегантное решение, в основном используйте рамку вместо подчеркивания. Вы должны были бы кодировать его цвет на основе "Active, Visted, 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

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

Граница-нижнее решение поместит линию под любым "p", "q" или "y" вместо нижних ножек букв Это на 2 пикселя ниже, чем подчеркивание.

Альтернатива - сделать позицию относительной
сделать позицию ^{абсолютной; верх: -3px; текст-отделка: нет;}

добавить дополнительные & nbsp; после

Answer 7

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

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

Answer 8

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

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

a sup{text-decoration:none;}